DOM学习——Node类型

childNodes

1.节点获取

获取子节点：某个节点.childNodes[序号] / 某个节点.childNodes.item(序号);
序号从零开始
^{(*￣(oo)￣)}注：节点包括文本节点和元素节点！！

eg: 

      

            

                
1
                
2
                
3
            
            
                aa
            
        
        

节点的关系：nextSibling / previousSibling
如果一个父节点只有一个子节点，那么，父节点的firstChild和lastChild都是这个子节点，这个子节点的 nextSibling / previousSibling 的值都是null；

2.节点增删改

增：前提是新建

appendChild()，添加到childNodes列表的最后面

eg:
        

            

                
1
                
2
                
3
            
        
        

插入：insertBefore

在前面插入

eg:

            

                
1
                
2
                
3
            
        
        

在后面插入
^{(*￣(oo)￣)}DOM并没有提供insertAfter方法。。。
要实现的就自己造一个

            

                
1
                
2
                
3
            
        

替换：replaceChild()

            

                
1
                
2
                
3
            
        

移除：removeChild()

//移除

           

               
1
               
2
               
3
           
       

//因为replaceChild、removeChild的节点都是包含文本节点的，所以在使用firstChild和lastChild的时候要注意，当前节点是否为文本节点。

比如下面就会看起来没有变化

           

               
1
               
2
               
3
           
       

上面这几种方法都是在操作某个节点的子节点，所以在使用这些方法之前必须获取父节点，并且，并不是所有节点都有子节点，如果在不支持子节点的节点使用这些方法，就会导致错误的发生。

·

克隆：cloneNode()

            

                
1
                
2
                
3
            
        

//参数true：复制节点以及整个子节点树
//参数为false：只复制节点，不会复制子节点