前面的话

　　一般地，提起操作会想到“增删改查”这四个字，而DOM节点操作也类似地对应于此，接下来将详细介绍DOM的节点操作方法

 

前提

　　DOM提供节点操作的方法是因为DOM节点关系指针都是只读的

　　下列代码中想通过修改myUl的父级节点来修改其节点关系，但由于parentNode属性是只读的，所以修改无效，在IE8-浏览器下甚至会报错

　　DOM节点操作方法包括创建节点、插入节点、删除节点、替换节点、查看节点和复制节点。查看节点指的是查看节点之间的关系，在已经做过详细介绍，就不再赘述

 

创建节点

createElement()

　　document.createElement()方法可以创建新元素。这个方法接受一个参数，即要创建元素的标签名，这个标签名在HTML文档中不区分大小写

var oDiv = document.createElement("div");console.log(oDiv);//
     

　　IE8-浏览器可以为这个方法传入完整的元素标签，也可以包含属性

var oDiv = document.createElement('
     
');console.log(oDiv.id);//'box'

　　利用这种方法可以避开IE7-浏览器在动态创建元素的下列问题　　

　　1、不能设置动态创建的<iframe>元素的name特性

　　2、不能通过表单的reset()方法重设动态创建的<input>元素

　　3、动态创建的type特性值为"reset"的<button>元素重设不了表单

　　4、动态创建的一批name相同的单选按钮彼此毫无关系。name值相同的一组单选按钮本来应该用于表示同一选项的不同值，但动态创建的一批这种单选按钮之间却没有这种关系

var iframe = document.createElement("");var input = document.createElement(");var button = document.createElement("");var radio1 = document.createElement("");var radio2 = document.createElement("");

　　所有节点都有一个ownerDocument的属性，指向表示整个文档的文档节点document；在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性

 

插入节点

appendChild()

　　appendChild()方法用于向childNodes列表的末尾添加一个节点，并返回新增节点。添加节点后，childNodes中的新增节点、父节点和以前的最后一个子节点的关系指针都会相应地得到更新

　　如果插入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置

     
      第一个div
     
     
      第二个div
     
变换位置

insertBefore()

　　insertBefore()方法接收两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个兄弟节点(previousSibling)，同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()方法执行相同的操作。同样地，如果插入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置

referenceNode.parentNode.insertBefore(newNode,referenceNode);

     
    
      
        
       
        oldDiv
       
    
    
     
插入oldDiv的前面插入myUl的前面插到oldDiv的里面

【小效果】

     
    
      
1
    
      
2
    
      
3
    
      
4
    
      
5
    
      
6
        
     

insertAfter()

　　由于不存在insertAfter()方法，如果要插在当前节点的某个子节点后面，可以用insertBefore()和appendChild()封装方法

function insertAfter(newElement,targetElement){    var parent = targetElement.parentNode;    if(parent.lastChild == targetElement){        parent.appendChild(newElement);    }else{        parent.insertBefore(newElement,targetElement.nextSibling)    }}

     
      old
     
增加节点

insertAdjacentHTML()

　　insertAdjacentHTML()方法作为终级办法，相当于前面三个方法的综合。该方法接收两个参数：插入的位置和要插入的HTML文本

　　第一个参数必须是下列值之一，且这些值都必须是小写形式：

　　"beforebegin"    　 在当前元素之前插入一个紧邻的同级元素　　"afterbegin"    　　在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素　　"beforeend"        在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素　　"afterend"         在当前元素之后插入一个紧邻的同级元素

　　第二个参数是一个HTML字符串，如果浏览器无法解析字符串，就会抛出错误

　　[注意]该方法无返回值

     
      This is the element content
     
beforebeginafterbeginbeforeendafterend

移除节点

removeChild()

　　removeChild()方法接收一个参数，即要移除的节点，被移除的节点成为方法的返回值

     
      等待移除的节点
     
移除节点

　　下面代码可以移除当前节点的所有子节点

var element = document.getElementById("top");while (element.firstChild) {  element.removeChild(element.firstChild);}

【小效果】

开始删除节点
     
    
      
1
    
      
2
    
      
3
    
      
4
    
      
5
    
      
6
        
     

remove()

　　相比于removeChild()，remove()方法不太常见，但是却非常简单。该方法不用调用其父节点，直接在当前节点使用remove()方法就可以删除该节点，无返回值

　　remove()方法常用于删除和，不可用于

　　[注意]IE浏览器不支持该方法

     
      123
     

 

替换节点

replaceChild()

　　replaceChild()接收的两个参数是要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置

oldChild.parentNode.replaceChild(newChild, oldChild);

     
      1
     
     
      2
     
     
      3
     
新增节点替换(4替换2)原有节点替换(3替换1)

【小效果】

开始替换节点
     
    
      
1
    
      
2
    
      
3
    
      
4
    
      
5
    
      
6
        
     

 

复制节点

cloneNode()

　　cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否执行深复制。在参数为true时，执行深复制，也就是复制节点及整个子节点树。在参数为false的情况下，执行浅复制，即复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。若参数为空，也相当于false　

　　[注意]cloneNode()方法不会复制添加到DOM节点中的javascript属性，例如事件处理程序等。这个方法只复制特性和子节点，其他一切都不会复制

     
    
      
1
    
      
2
    
      
3
    
      
4
    
      
5
    
      
6