首頁 >web前端 >js教程 >一文搞定JavaScript的節點操作

一文搞定JavaScript的節點操作

WBOY轉載: 2022-06-10 15:18:142717瀏覽

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

一文搞定JavaScript的節點操作

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

節點概述

網頁中的所有內容都是節點（標籤、屬性、文字、註解等），在 DOM 中，節點使用 node 來表示。
HTML DOM 樹中的所有節點均可透過 JavaScript 進行訪問，所有 HTML 元素（節點）均可修改，也可以建立或刪除。
一文搞定JavaScript的節點操作
一般地，節點至少擁有 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>

一文搞定JavaScript的節點操作

2.子節點

#1.node.childNodes （標準）

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

我是li
我是li
我是li
我是li

一文搞定JavaScript的節點操作
這裡為什麼有五個text節點呢，其實是對應五個換行，看下圖：

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

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

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

2.node.children (非標準)

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

我是li
我是li
我是li
我是li

一文搞定JavaScript的節點操作

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

一文搞定JavaScript的節點操作

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 这个就行，不必担心兼容性问题。