childNodes
1.节点获取
获取子节点：某个节点.childNodes[序号] / 某个节点.childNodes.item(序号);
序号从零开始
(*￣(oo)￣)注：节点包括文本节点和元素节点！！
eg:
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<span>
aa
</span>
</div>
<script>
var ul1 = document.getElementById("aa");
var firstNode = ul1.childNodes[0];
var firstNode2 = ul1.childNodes.item(0);
alert(firstNode.nodeName);
alert(firstNode2.nodeName);
</script>
节点的关系：nextSibling / previousSibling
如果一个父节点只有一个子节点，那么，父节点的firstChild和lastChild都是这个子节点，这个子节点的 nextSibling / previousSibling 的值都是null；
2.节点增删改
增：前提是新建
appendChild()，添加到childNodes列表的最后面
eg:
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script>
var ul2 = document.getElementById("aa");
var newChild = document.createElement("li");
var txt = document.createTextNode("我是新的");
newChild.appendChild(txt);
ul2.appendChild(newChild);
</script>
<!--这里是线创建一个li元素节点，然后新建一个文本节点，把文本节点添加到元素节点里面，
（在一个元素节点里面有文本节点，那么该文本节点就是这个元素节点的子节点），
再把整个节点添加到ul的、childNodes列表的最后面-->
插入：insertBefore
在前面插入
eg:
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script>
var ul2 = document.getElementById("aa");
var newChild = document.createElement("li");
var txt = document.createTextNode("我是插入的");
newChild.appendChild(txt);
var li2 = ul2.childNodes[1];
ul2.insertBefore(newChild,li2);
</script>
在后面插入
(*￣(oo)￣)DOM并没有提供insertAfter方法。。。
要实现的就自己造一个
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li id="bb"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script>
var newChild = document.createElement("li");
var txt = document.createTextNode("我是插入的");
newChild.appendChild(txt);
var target = document.getElementById("bb");
function insetAfter(newChild,target){
var parent = target.parentNode;
if(target == parent.lastChild){
parent.appendChild(newChild);
}
else{
parent.insertBefore(newChild,target.nextSibling);
}
}
insetAfter(newChild,target);
</script>
替换：replaceChild()
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li id="bb"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script>
var ul2 = document.getElementById("aa");
var newChild = document.createElement("li");
var txt = document.createTextNode("我是替换的");
newChild.appendChild(txt);
var target = document.getElementById("bb");
ul2.replaceChild(newChild,target);
</script>
移除：removeChild()
//移除
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li id="bb"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script>
var ul2 = document.getElementById("aa");
var target = document.getElementById("bb");
ul2.removeChild(target);
</script>
//因为replaceChild、removeChild的节点都是包含文本节点的，所以在使用firstChild和lastChild的时候要注意，当前节点是否为文本节点。
比如下面就会看起来没有变化
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li id="bb"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script>
var ul2 = document.getElementById("aa");
var target = document.getElementById("bb");
ul2.removeChild(ul2.firstChild);
</script>
上面这几种方法都是在操作某个节点的子节点，所以在使用这些方法之前必须获取父节点，并且，并不是所有节点都有子节点，如果在不支持子节点的节点使用这些方法，就会导致错误的发生。
·
克隆：cloneNode()
<div>
<ul id="aa">
<li><a href="#">1</a></li>
<li id="bb"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script>
var ul2 = document.getElementById("aa");
var newclone = ul2.cloneNode(true);
var newclone2 = ul2.cloneNode(false);
document.body.appendChild(newclone);
document.body.appendChild(newclone2);
</script>
//参数true：复制节点以及整个子节点树
//参数为false：只复制节点，不会复制子节点
网友评论