childNodes
1.節(jié)點獲取
獲取子節(jié)點：某個節(jié)點.childNodes[序號] / 某個節(jié)點.childNodes.item(序號);
序號從零開始
(*￣(oo)￣)注：節(jié)點包括文本節(jié)點和元素節(jié)點８爿骸焦辅！
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>
節(jié)點的關(guān)系：nextSibling / previousSibling
如果一個父節(jié)點只有一個子節(jié)點紧阔，那么，父節(jié)點的firstChild和lastChild都是這個子節(jié)點娩脾，這個子節(jié)點的 nextSibling / previousSibling 的值都是null；
2.節(jié)點增刪改
增：前提是新建
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>
<!--這里是線創(chuàng)建一個li元素節(jié)點柿赊，然后新建一個文本節(jié)點，把文本節(jié)點添加到元素節(jié)點里面幻枉，
（在一個元素節(jié)點里面有文本節(jié)點闹瞧，那么該文本節(jié)點就是這個元素節(jié)點的子節(jié)點），
再把整個節(jié)點添加到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方法奥邮。。罗珍。
要實現(xiàn)的就自己造一個
<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的節(jié)點都是包含文本節(jié)點的，所以在使用firstChild和lastChild的時候要注意覆旱，當(dāng)前節(jié)點是否為文本節(jié)點蘸朋。
比如下面就會看起來沒有變化
<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>
上面這幾種方法都是在操作某個節(jié)點的子節(jié)點，所以在使用這些方法之前必須獲取父節(jié)點扣唱，并且藕坯，并不是所有節(jié)點都有子節(jié)點团南，如果在不支持子節(jié)點的節(jié)點使用這些方法，就會導(dǎo)致錯誤的發(fā)生炼彪。
·
克峦赂：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>
//參數(shù)true：復(fù)制節(jié)點以及整個子節(jié)點樹
//參數(shù)為false：只復(fù)制節(jié)點，不會復(fù)制子節(jié)點
