一文搞定JavaScript的節點操作

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於節點操作的相關問題，包括了父級節點、子節點、兄弟節點、增加刪除複製節點等等內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

在我們的網頁中，除了用DOM提供的方法取得節點，還可以利用節點的層級關係來取得節點，都比較簡單，今天總結一下！

節點概述

網頁中的所有內容都是節點（標籤、屬性、文字、註解等），在 DOM 中，節點使用 node 來表示。
HTML DOM 樹中的所有節點均可透過 JavaScript 進行訪問，所有 HTML 元素（節點）均可修改，也可以建立或刪除。

一般地，節點至少擁有 nodeType （節點型別）、 nodeName （節點名稱）和 nodeValue （節點值）這三個基本屬性。

• 元素節點nodeType 為1
• 屬性節點nodeType 為2
• 文字節點nodeType 為3（文字節點包含文字、空格、換行等）

我們在實際開發中，節點操作主要操作的是元素節點。

節點層級

利用DOM樹可以把節點分割成不同的層級關係，常見的是父子兄弟層級關係。

1.父級節點

node.parentNode

• #parentNode屬性可以傳回某節點的父節點，注意是最近的一個父節點。
• 如果指定的節點沒有父節點則回傳null。

<p>
        </p><p></p>
    
    <script>
        var son = document.querySelector(".son");
        console.log(son.parentNode);
    </script>

2.子節點

#1.node.childNodes （標準）

node .childNodes 傳回包含指定節點的子節點的集合，該集合為即時更新的集合。

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

    <script> var ul = document.querySelector(&#39;ul&#39;); // 子节点childNodes 所有子节点，包含元素节点，文本节点等。 console.log(ul.childNodes); </script>

這裡為什麼有五個text節點呢，其實是對應五個換行，看下圖：

這五個換行是文字節點，加上四個li元素節點，共9個

注意：傳回值裡麵包含了所有的子節點，包括元素節點，文字節點等。
如果只想要取得裡面的元素節點，則需要專門處理。所以我們一般不提倡使用 childNodes 。

	var ul = document.querySelector('ul');
	for (var i = 0;i

2.node.children (非標準)

node.children 是一個唯讀屬性，傳回所有的子元素節點。它只回傳子元素節點，其餘節點不回傳（這個是我們重點掌握的）。
雖然 children 是一個非標準，但是得到了各個瀏覽器的支持，因此我們可以放心使用。

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

    <script> var ul = document.querySelector(&#39;ul&#39;); console.log(ul.children); </script>

3.第一個子節點和最後一個子節點

1.node. firstChild
2.node. lastChild
firstChild 傳回第一個子節點，找不到則回傳null ,lastChild同理。同樣，也是包含所有的節點。

3.node. firstElementChild
firstElementChild 傳回第一個子元素節點，找不到則傳回 null 。
4.node. lastElementChild
lastElementChild 傳回最後一個子元素節點，找不到則傳回 null 。

注意：這兩個方法有相容性問題，IE9以上才支援。

5.node.children[0]
5.node.children[node.children.length - 1]
注意：實際開發的寫法，不存在相容性問題。

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

    <script> var ul = document.querySelector(&#39;ul&#39;); // 1.不管是文本节点还是元素节点 console.log(ul.firstChild); console.log(ul.lastChild); // 2.返回对应的自元素节点，IE9以上才支持 console.log(ul.firstElementChild); console.log(ul.lastElementChild); // 3.不存在兼容性问题 console.log(ul.children[0]); console.log(ul.children[ul.children.length - 1]); </script>

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,指定元素)

    <script> var ul = document.querySelector("ul"); var li =document.createElement("li"); var span = document.createElement("span") ul.appendChild(li); ul.insertBefore(span,ul.children[0]); </script>

删除节点

node.removeChild(child)

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

        
• aniu
        
• marry
        
• tom
    

    <script> var ul = document.querySelector("ul"); ul.removeChild(ul.children[2]); </script>

复制节点（克隆节点）

node.cloneNode ()

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

        
• aniu
        
• marry
        
• tom
    

    <script> var ul = document.querySelector("ul"); var li1 = ul.children[0].cloneNode(); //浅拷贝 var li2 = ul.children[0].cloneNode(true); //深拷贝 ul.appendChild(li1); ul.appendChild(li2); </script>

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

以上是一文搞定JavaScript的節點操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！