DOM操作节点

1. 获取子节点

• childNodes 所有子节点（元素、注释、文本、换行符）。

    

      
      
1
      
2
      
3
    

结果为 NodeList(9) [text, comment, text, li.li1, text, li.li2, text, li.li3, text]。

• firstChild 第一个子节点（元素、注释、文本、换行符）。

结果为 #text。

• lastChild **最后一个子节点（元素、注释、文本、换行符）。

结果为 #text。

2. 获取子元素节点

• children 获取所有子元素节点，有兼容问题（低版本IE【6-8】会和childNodes一样）。

    

      
      
1
      
2
      
3
    

会正确获得所有子节点，结果为HTMLCollection(3) [li.li1, li.li2, li.li3]。

• firstElementChild 获取第一个子元素

结果为

1

。

• lastElementChild 获取最后一个子元素

结果为

1

.

3. 获取父元素节点

• parentNode 获取父元素

    

      
      
1
      
2
      
3
    

结果为

...

. 包含了

中的 所有子元素和注释（相当于上方代码完整输出）。

• offsetParent 获取具有定位属性的最近父元素

    

      

        
        
1
        
2
        
3
     
   

结果为：

...

.同样包含

中的所有元素&注释。

4. 获取同级节点

• previousSibling 获取上一个兄弟节点（元素|注释|文本|换行符）

    

      
      
1
      
2
      
3
    

结果为 #text.

• nextSibling 获取下一个兄弟节点

结果为 #text.

5. 获取同级元素节点

• previousElementSibling 获取上一个兄弟元素节点

    

      
      
1
      
2
      
3
    

结果是

1

.

• nextElementSibling 获取下一个兄弟元素节点

结果是

3

.

带有Element的方法，低版本IE不兼容（为了和IE区别做出了便利性的牺牲）。

6. 节点的增删改查

• 创建节点 createTextNode()，createElement()

    document.createTextNode('文本');  // 创建文本节点
    document.createElement('div');  // 创建节点

• 插入节点 appendChild()，insertBefore()

    parent.appendChild(newNode); // 父元素末尾插入元素
    oldNode.parentNode.insertBefore(newNode,oldNode);   // 指定元素前插入节点

实例1（在body末尾插入元素）

插入节点.png

实例2 （在div前插入元素）

插入节点2.png

• 替换节点 replaceChild()，innerHTML，innerText

    oldNode.parentNode.replaceChild(newNode, oldNowde);
    element.innerHTML; //  获取元素中的所有节点
    element.innerText; // 获取元素中的文本节点
    element.innerHTML= '
文本
'; 
    //  覆盖元素中的所有内容，可设置元素节点&文本节点^
    element.innerText = '文本'; 
    // 覆盖元素中的所有内容，只能设置文本节点,但可以以文本输出标签。

实例1

    

      需要被替换的节点
    

替换节点.png

实例2

    

      需要被替换的节点
      需要被替换的节点
      需要被替换的节点
    

innerHTML&innerText 会覆盖元素中的全部内容，并且只能同时使用一种，如果将注释取消，结果就是

插入文本

，按顺序覆盖，可以p.innerHTML = '插入文本'。虽然inner这种方式简单，但速度会比较慢。

• 删除节点 removeChild()

      delNode.parentNode.removeChild(delNode);

实例

插入和修改同级元素都会调用父元素执行，所以会出现.parentNode

• 复制节点 cloneNode()

    element.cloneNode(false) // 只克隆节点
    element.cloneNode(false) // 克隆节点和其内部的所有节点

实例

    
克隆节点

克隆节点.png