操作dom树

　　　　** appendChild方法

　　　　　　　- 添加子节点到末尾

　　　　　　　- 特点：类似于剪切黏贴的效果

    
     
        
      
            
       
tom
            
       
mary
            
       
jack
        
      
    
     
    
     
    
     
         

　　　　** insertBefore(newNode,oldNode)方法

　　　　　　　- 在某个节点之前插入一个新的节点

　　　　　　　- 两个参数

　　　　　　　　　　　* 要插入的节点

　　　　　　　　　　　* 在谁之前插入

　　　　　　　- 插入一个节点，节点不存在，创建

　　　　　　　　　　　1、创建标签

　　　　　　　　　　　2、创建文本

　　　　　　　　　　　3、把文本添加到标签下面

　　　　　　　　　　　　　　　- 代码

　　　　　　　　　　　　　　　　/*

　　　　　　　　　　　　　　　　　1、获取到li13标签

　　　　　　　　　　　　　　　　　2、创建li

　　　　　　　　　　　　　　　　　3、创建文本

　　　　　　　　　　　　　　　　　4、把文本添加到li下面

　　　　　　　　　　　　　　　　　5、获取到ul

　　　　　　　　　　　　　　　　　6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）

　　　　　　　　　　　　　　　　*/

　　　　　　　　　　　　　　　　//获取li3 标签

　　　　　　　　　　　　　　　　　var li13 = document.getElementById("li13");

　　　　　　　　　　　　　　　　//创建li

　　　　　　　　　　　　　　　　　var li15 = document.createElement("li");

　　　　　　　　　　　　　　　　//创建文本

　　　　　　　　　　　　　　　　　var text15 = document.createTextNode("董小宛");

　　　　　　　　　　　　　　　　//把文本添加到li下面 appendChild

　　　　　　　　　　　　　　　　　li15.appendChild(text15);

　　　　　　　　　　　　　　　　//获取到ul

　　　　　　　　　　　　　　　　　var ul21 = document.getElementById("ulid21");

　　　　　　　　　　　　　　　　//在<li>貂蝉</li>之前添加 <li>董小宛</li>

　　　　　　　　　　　　　　　　//insertBefore(newNode,oldNode)

　　　　　　　　　　　　　　　　　ul21.insertBefore(li15,li13);

　　　　*** 不存在 没有insertAfter()方法

    
     
        
      
西施
        
      
王昭君
        
      
貂蝉
        
      
杨玉环
    
     
         

　　　　　

　　　　　** removeChild方法：删除节点

　　　　　　　　　　- 通过父节点删除，不能自己删除自己

　　　　　　　　　　　　　　- /*

　　　　　　　　　　　　　　　　1、获取到li24标签

　　　　　　　　　　　　　　　　2、获取父节点ul标签

　　　　　　　　　　　　　　　　3、执行删除（通过父节点删除）

　　　　　　　　　　　　　　*/

                                    

    
     
        
      
西施
        
      
王昭君
        
      
貂蝉
        
      
杨玉环
    
     
         

              ** replaceChild(newNode,oldNode)方法: 替换节点

                            - 不能自己替换自己，通过父节点替换

                            - 两个参数

                           ** 第一个参数：新的节点（替换成的节点）

                           ** 第二个参数：旧的节点（被替换的节点）

 

    
     
        
      
紫衫龙王
        
      
白眉鹰王
        
      
金毛狮王
        
      
青翼蝠王
    
     
         

              ** cloneNode(boolean): 复制节点

    
     
        
      
紫衫龙王
        
      
白眉鹰王
        
      
金毛狮王
        
      
青翼蝠王
    
     
    
     
      
     
         

            ** 操作dom总结

                        * 获取节点使用方法

                                    getElementById()：通过节点的id属性，查找对应节点。

                                    getElementsByName()：通过节点的name属性，查找对应节点。

                                    getElementsByTagName()：通过节点名称，查找对应节点

                        * 插入节点的方法

                                    insertBefore方法：在某个节点之前插入

                                    appendChild方法：在末尾添加，剪切黏贴

                        * 删除节点方法

                                    removeChild方法：通过父节点删除

                        * 替换节点方法

                                    replaceChild方法：通过父节点替换