1、首先获取要添加的节点的节点，然后创建一个节点，添加到节点的前面。
2、<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DOM树 *** 作</title> <script> function f1(){。
3、找到狮子狗这个节点 通过id查找到狮子狗节点 var ul=document.getElementById("d1")。
4、</head> <body> <!--在ul列表中追加一个蛮王英雄--> <ul id="d1"> <li>亚索</li> <li>狮子狗</li> <li>披甲龙龟</li>。
5、 </ul> <input type="button" value="追加蛮王" onclick="f2()" /> </body></html>。
6、在狮子狗节点后追加一个<li>蛮王</li> a.找到狮子狗这个节点 通过id查找到狮子狗节点 var li=document.getElementById("l1") b.创建<li>蛮王</li>节点对象和内容。
动态创建Dom节点jQuery中使用$(html字符串)来动态创建Dom节点，并且返回一个jQuery对象，可以调用append等方法将创建的节点添加到Dom中。
例如：
var
link
=
$("<a
href='http://www.baidu.com'>百度</a>")
$("div:first").append(link)
添加节点元素的方法：
Append方法用来在元素的末尾追加元素（最后一个子节点）
Prepend在元素的开始添加元素（第一个子节点）
After:在元素之后添加元素（添加兄弟节点）
Before：在元素之前添加元素（添加兄弟节点）
子元素.appendTo(父元素)：在元素的末尾追加一个子元素
子元素.prependTo(父元素):在元素的开始追加一个子元素
A.insertBefore(B)
将A插入到B的前面，等同于B.before(A)
X.insertAfter(B)
将X插入到Y的后面，等同于Y.after(X)
删除节点：
Empty():清空该元素下的所有子节点
等同于：while(ele.firstChild){ele.removeChild(ele.firstChild)}
Remove(selectot)自杀；删除当前元素，返回值为被删除的元素，可以讲节点删除之后放到其他节点下面，有一个移动的效果，例如：
var
lis
=
$("#ulSite
li").remove()
$("#ulSite2").append(lis)
Clone()克隆节点，支复制节点，不复制节点
Clone(true):克隆节点带事件
节点的替换：
$("br").replaceWith("<hr/>")
$("br").replaceAll("<hr/>")
包裹节点
Wrap()方法用来将所有的元素逐个用指定的标签包裹
$("b").wrap("<font
color='red'></font>")将所有粗体字红色显示
wrapInner()在内部围绕
1.node.nodeName：查看节点名称（元素节点返回标签名（大写），文本节点返回 #text）
2.node.nodeType：查看节点类型（元素节点返回1，属性节点返回2，文本节点返回3）
3.node.nodeValue：查看节点的值（元素节点返回null，文本节点返回文本值）
DOM对象集合了HTML标签中能被解析的属性（标准属性）作为DOM对象的属性
查询到的input节点包含了type、name、value等属性，其他未设置值的属性也包含在节点对象中
1.node.offsetLeft：元素在页面中的水平坐标值
2.node.offsetTop：元素在页面中的垂直坐标值
3.node.clientWidth：元素在页面视口区域占据的宽度(不含边框)
4.node.clientHeight：元素在页面视口区域占据的高度(不含边框)
5.node.offsetWidth：元素在页面区域占据的宽度(含边框)
6.offsetHeight：元素在页面区域占据的高度(含边框)
7.scrollLeft：窗口或者容器内容水平滚动的距离
8.scrollTop：窗口或者容器内容垂直滚动的距离
融在第三点最后了
1.方法名.innerHTML（包含了此方法对应的对象内所有空白文本以及标签在内的所有内容）
2.方法名.innerText（包含了此方法对应的对象内文本内容且空白文本除外）
1.node.getAttribute()：读取节点的属性值
2.node.setAttribute（）：设置节点属性值
3.node.removeAttribute（）：删除节点的属性
4.node.hasAttribute（）：检测节点是否存在某属性
1.方法名.querySelector（选择器）：按CSS样式查询，返回第一个节点
2.node.querySelectorAll(选择器)：按CSS样式查询，返回所有节点集合
3.node.getElementsByTagName(tname)：查询node下面所有标签名为tname的元素集合
4.node.getElementsByClassName(cname)：查询node下面所有类名为cname的元素集合
1.往父节点插入子节点并指定所有元素的后面
父级方法名.appendChild（插入的元素）
2.往父节点插入子节点并指定在某个子元素的前面
父级方法名.insertBefore（插入的元素，插入的元素后的一个元素名）
注意：在dom中插入节点都是基于父节点来完成的
1. 父级方法名.removeChild（子级元素）：删除父级元素中的子级节点
1.父级方法名.replaceChild（new，old）：将父级元素中的old节点替换成一个新的new节点
1.浅复制：node.cloneNode()：只复制此元素不包含子元素
2.深复制：node.cloneNode(true)：复制此元素且包含子元素
1.父级元素.hasChildNodes() ：检测节点是否含有子节点，包括空白节点
1.node.parentNode：node的父节点
2.node.childNodes ：node所有子节点
3.node.children：node所有子元素
4.node.firstChild：node的第一个子节点
5.node.firstElementChild：node的第一个子元素
6.node.lastChild ：node的最后一个节点
7.node.lastElementChild：的最后一个元素
8.node.nextSibling：node的下一个兄弟节点
9.node.nextElementSibling：node的下一个兄弟元素
10.node.previousSibling：node的前一个兄弟节点
11.node.previousElementSibling：node前一个兄弟元素
十四、节点样式 *** 作
1.html标签中集合了style的标准属性因此可以使用 DOM.style访问样式， 注意 它只能访问使用style定义的内联样式，而不能访问内部和外链样式，且访问样式需要使用驼峰替代" - "
2.当CSS样式较多时，可以使用DOM.cssText来重置。
3.window.getComputedStyle()：返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）