1 つの記事で包括的な JavaScript ノード操作を説明

2.node.children (非標準)

node.children は、すべての子要素ノードを返す読み取り専用プロパティです。子要素ノードのみが返され、他のノードは返されません (これが私たちが焦点を当てている点です)。
こどもは標準外ですが、様々なブラウザに対応しているので安心して使えます。

        
• 我是li
        
• 我是li
        
• 我是li
        
• 我是li
    

3. 最初の子ノードと最後の子ノード

1.node.firstChild
2.node.lastChild
firstChild は最初の子ノードを返します。見つからない場合は null を返します。lastChild にも同じことが当てはまります。同様に、すべてのノードが含まれます。

3.node.firstElementChild
firstElementChild は最初の子要素ノードを返し、見つからない場合は null を返します。
4.node.lastElementChild
lastElementChild は、最後の子要素ノードを返すか、見つからない場合は null を返します。

注: これら 2 つの方法には互換性の問題があり、IE9 以降でのみサポートされます。

5.node.children[0]
5.node.children[node.children.length - 1]
注: 実際の開発方法には互換性がありません。問題。

4.兄弟节点

1.node. nextSibling
nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null 。同样，也是包含所有的节点。
2.node. previousSibling
previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也包含所有的节点。
3.node. nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到返回 null 。
4.node. previousElementSibling
previousElementSibling 返回当前元素上一个兄弟元素节点，找不则返回 null 。
注意：这两个方法有兼容性问题，IE9以上才支持。

那么如何封装一个满足兼容性，又可以找到兄弟元素节点的函数呢

   function getNextElementSibling(element){
       var el = element;
       while(el = el.nextSibling){
           if(el.nodeType == 1){
               return el;
           }
       }
       return null;
   }

上面这段封装的代码就可解决，但不必考虑太多，因为ie浏览器即将要停止服务了，所以你只要记住node. nextElementSibling 这个就行，不必担心兼容性问题。

创建节点

document.createElement (’ tagName ＇)

document.createElenent (）方法创建由 tagName 指定的Н TML 元素。因为这些元素原先不存在，是根据我的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点与添加节点

1.node. appendChild(child)

node.appendChild (）方法将一个节点添加到指定父节点的子节点列表末尾。类似 css 里面的 after 伪元素。

2.node.insertBefore(child,指定元素)

删除节点

node.removeChild(child)

node.removeChild(child) 方法从DOM中删除一个子节点，返回删除的节点。

        
• aniu
        
• marry
        
• tom
    

复制节点（克隆节点）

node.cloneNode ()

node.cloneNode ()方法返回调用该方法的节点的一个副本。也称为克隆节点／拷贝节点
1．如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克降里面的子节点。
2．如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

        
• aniu
        
• marry
        
• tom
    

【相关推荐：javascript视频教程、web前端】