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：只复制节点，不会复制子节点