childNodes

1.節(jié)點(diǎn)獲取

獲取子節(jié)點(diǎn)：某個(gè)節(jié)點(diǎn).childNodes[序號(hào)] / 某個(gè)節(jié)點(diǎn).childNodes.item(序號(hào));
序號(hào)從零開始
^{(*￣(oo)￣)}注：節(jié)點(diǎn)包括文本節(jié)點(diǎn)和元素節(jié)點(diǎn)！！

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é)點(diǎn)的關(guān)系：nextSibling / previousSibling
如果一個(gè)父節(jié)點(diǎn)只有一個(gè)子節(jié)點(diǎn)，那么，父節(jié)點(diǎn)的firstChild和lastChild都是這個(gè)子節(jié)點(diǎn)，這個(gè)子節(jié)點(diǎn)的 nextSibling / previousSibling 的值都是null；

2.節(jié)點(diǎn)增刪改

增：前提是新建

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)建一個(gè)li元素節(jié)點(diǎn)，然后新建一個(gè)文本節(jié)點(diǎn)，把文本節(jié)點(diǎn)添加到元素節(jié)點(diǎn)里面，
（在一個(gè)元素節(jié)點(diǎn)里面有文本節(jié)點(diǎn)，那么該文本節(jié)點(diǎn)就是這個(gè)元素節(jié)點(diǎn)的子節(jié)點(diǎn)），
再把整個(gè)節(jié)點(diǎn)添加到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方法。。。
要實(shí)現(xiàn)的就自己造一個(gè)

<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>
//因?yàn)閞eplaceChild、removeChild的節(jié)點(diǎn)都是包含文本節(jié)點(diǎn)的，所以在使用firstChild和lastChild的時(shí)候要注意，當(dāng)前節(jié)點(diǎn)是否為文本節(jié)點(diǎn)。

比如下面就會(huì)看起來沒有變化
<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>

上面這幾種方法都是在操作某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，所以在使用這些方法之前必須獲取父節(jié)點(diǎn)，并且，并不是所有節(jié)點(diǎn)都有子節(jié)點(diǎn)，如果在不支持子節(jié)點(diǎn)的節(jié)點(diǎn)使用這些方法，就會(huì)導(dǎo)致錯(cuò)誤的發(fā)生。

·

克?。篶loneNode()

<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é)點(diǎn)以及整個(gè)子節(jié)點(diǎn)樹
//參數(shù)為false：只復(fù)制節(jié)點(diǎn)，不會(huì)復(fù)制子節(jié)點(diǎn)