【EASYDOM系列教程】之遍歷節點

BigNerdCoding 發布于2019-08-20 18:18 / 2742人閱讀

摘要：對象提供了一系列的屬性和方法用來利用節點樹結構中節點的關系實現遍歷其中的節點。在上述語法結構中，屬性返回指定節點的父元素節點。該屬性獲取一個包含指定節點的所有子節點的集合。值得注意的是及之前版本的瀏覽器中不存在空白節點問題。

Node 對象提供了一系列的屬性和方法用來利用 DOM 節點樹結構中節點的關系實現遍歷其中的節點。

關于節點之間的關系，可以參考《DOM樹結構》一節有關節點之間關系的內容。

獲取父節點

通過 HTML 頁面中指定元素查找其父級節點，我們可以使用 Node 對象的 parentNode 屬性實現:

pNode = node.parentNode;

在上述語法結構中，parentNode 屬性返回指定節點的父節點。

值得注意的是: 一個元素節點的父節點，可能是一個元素節點，也可能是一個文檔節點。

以下代碼示例，就是通過 parentNode 屬性獲取指定節點的父節點，再實現其他操作的:

var btn = document.getElementById("btn");
var parentNode = btn.parentNode;
var className = parentNode.className;
className += " animate";
parentNode.className = className;

獲取父元素節點

Node 對象除了提供了 parentNode 屬性可以獲取指定節點的父節點之外，還提供了 parentElement 屬性獲取指定節點的父元素節點。

parentElementNode = node.parentElement;

在上述語法結構中，parentElement 屬性返回指定節點的父元素節點。

值得注意的是: 如果一個節點沒有父節點，或者父節點不是一個元素節點的話，parentElement 屬性返回 null。

以下代碼示例，就是通過 parentElement 屬性獲取指定節點的父元素節點，再實現其他操作的:

var btn = document.getElementById("btn");
var parentElement = btn.parentElement;
var className = parentElement.className;
className += " animate";
parentElement.className = className;

父節點與父元素節點的區別

所謂父節點，并沒有指定某個節點的父節點一定是哪個類型的節點。而父元素節點，指定了某個節點的父節點一定是元素節點。

parentNode: 獲取指定節點的父節點，其父節點不一定是元素節點。

parentElement: 獲取指定節點的父元素節點，其父節點必須是元素節點。

如果我們獲取元素的父節點的話，就是 document 文檔節點。而 document 文檔節點并不是一個元素節點。如下述代碼示例:

// 獲取  元素
var html = document.documentElement;
console.log("parentNode: " + html.parentNode);
console.log("parentElement: " + html.parentElement);

上述代碼示例，輸出的結果如下:

獲取子節點

通過 HTML 頁面中指定元素查找其子節點，我們可以通過以下 Node 對象的屬性實現:

屬性名	描述
childNodes	獲取指定節點的所有子節點
firstChild	獲取指定節點的第一個子節點
lastChild	獲取指定節點的最后一個子節點

值得注意的是: HTML 頁面中某個元素的子節點不一定是唯一的。

獲取所有子節點

Node 對象提供了 childNodes 屬性用于獲取 HTML 頁面中指定節點的所有子節點:

var ndList = Node.childNodes;

在上述語法結構中，childNodes 屬性的返回值 ndList 是一個 NodeList 對象，并且為只讀。該屬性獲取一個包含指定節點的所有子節點的集合。

值得注意的是: childNodes 屬性返回的是一個動態的 NodeList 對象。有關動態 NodeList 的內容，請參考《定位頁面元素》一節的內容。

以下代碼示例，就是通過指定節點獲取其所有子節點，再實現其他操作的:

var parentNode = document.getElementById("parent");
var children = parentNode.childNodes;
console.log(children);

上述代碼示例，輸出的結果如下:

我們會發現，獲取到的所有子節點，除了真正的子節點

上述代碼示例的 DOM 節點樹結構如下圖所示:

如果將 HTML 頁面的源代碼編寫成一行時，這個空白節點的問題可以得到解決。但這種解決方式妨礙了我們代碼的可讀性，并不建議這樣解決。

值得注意的是: IE 8 及之前版本的瀏覽器中不存在空白節點問題。

空白節點的解決方案

在開發中，空白節點的問題將 DOM 節點樹結構的解析及操作增加了不少的難度和麻煩。我們這里提供一種比較簡單有效的解決方式:

棄用 DOM 中 Node 對象用于獲取指定節點的子節點和兄弟節點的屬性。

通過使用 getElementsByTagName() 方法實現相應功能。

比如我們要查找 HTML 頁面指定元素的所有子節點的話，我們按照如下代碼示例實現:

var parentNode = document.getElementById("parent");
var children = parentNode.getElementsByTagName("button");
console.log(children);

上述代碼示例運行的結果如下:

關于 DOM 中為什么要具有空白節點以及更完整的解決方案，可以參考 Mozilla 社區的《DOM 中的空白符》。

獲取第一個子節點

Node 對象提供了 firstChild 屬性用于獲取指定節點的第一個子節點:

var first_child = node.firstChild;

在上述語法結構中，firstChild 屬性返回的 first_child 表示當前節點的第一個子節點的引用。

值得注意的是: 如果當前節點無子節點，則 firstChild 屬性返回?null。

以下代碼示例，就是通過指定節點獲取其第一個子節點，再實現其他操作的:

var parentNode = document.getElementById("parent");
var firstChild = parentNode.firstChild;

通過上述代碼示例，我們最終得到依舊是空白節點，而并非第一個子節點。

var parentNode = document.getElementById("parent");
var firstChild = parentNode.getElementsByTagName("button")[0];
console.log(firstChild);

通過 getElementsByTagName() 方法替換之后，所得到的節點才是真正的第一個節點。

獲取最后一個節點

Node 對象提供了 lastChild 屬性用于獲取指定節點的最后一個子節點:

var last_child = node.lastChild;

在上述語法結構中，lastChild 屬性返回的 last_child 表示當前節點的最后一個子節點的引用。

值得注意的是: 如果當前節點無子節點，則 lastChild 屬性返回?null。

以下代碼示例，就是通過指定節點獲取其最后一個子節點，再實現其他操作的:

var parentNode = document.getElementById("parent");
var lastChild = parentNode.lastChild;

通過上述代碼示例，我們最終得到依舊是空白節點，而并非最后一個子節點。

var parentNode = document.getElementById("parent");
var children = parentNode.getElementsByTagName("button");
var lastChild = children[children.length-1];

通過 getElementsByTagName() 方法替換之后，所得到的節點才是真正的最后一個節點。

獲取相鄰兄弟節點

通過 HTML 頁面中指定元素查找其相鄰兄弟節點，我們可以通過以下 Node 對象的屬性實現:

屬性名	描述
previousSibling	獲取指定節點的前面相鄰兄弟節點
nextSibling	獲取指定節點的后面相鄰兄弟節點

獲取相鄰前面兄弟節點

Node 對象提供了 previousSibling 屬性用于獲取指定節點的前面相鄰兄弟節點:

previousNode = node.previousSibling;

在上述語法結構中，previousSibling 屬性返回的 previousNode 表示當前節點的前一個兄弟節點。

值得注意的是: 如果當前節點無前一個兄弟節點，則 previousSibling 屬性返回?null。

以下代碼示例，就是通過指定節點獲取其前面相鄰兄弟節點，再實現其他操作的:

var elem = document.getElementById("btn");
var previousSibling = elem.previousSibling;

通過上述代碼示例，我們最終得到依舊是空白節點，而并非前面相鄰兄弟節點。

// 判斷獲取的兄弟節點是否為元素節點
if ( previousSibling.nodeType != 1){
    previousSibling = previousSibling.previousSibling;
}

通過判斷獲取的節點類型是否為元素節點，實現如何獲取真正的前面相鄰兄弟節點。

獲取相鄰后面兄弟節點

Node 對象提供了 nextSibling 屬性用于獲取指定節點的后面相鄰兄弟節點:

nextNode = node.nextSibling;

在上述語法結構中，nextSibling 屬性返回的 nextNode 表示當前節點的后一個兄弟節點。

值得注意的是: 如果當前節點無后一個兄弟節點，則 nextSibling 屬性返回?null。

以下代碼示例，就是通過指定節點獲取其后面相鄰兄弟節點，再實現其他操作的:

var elem = document.getElementById("btn");
var nextSibling = elem.nextSibling;

通過上述代碼示例，我們最終得到依舊是空白節點，而并非后面相鄰兄弟節點。

// 判斷獲取的兄弟節點是否為元素節點
if ( nextSibling.nodeType != 1){
    nextSibling = nextSibling.nextSibling;
}

通過判斷獲取的節點類型是否為元素節點，實現如何獲取真正的后面相鄰兄弟節點。

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。

本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

GPU云服務器云服務器系列之系列之二架構之坑系列 linux系列教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84309.html

【EASYDOM系列教程】之遍歷元素

摘要：對象提供了一系列的屬性和方法用來利用元素樹結構中元素的關系實現遍歷其中的元素。關于元素之間的關系，可以參考元素樹一節有關元素之間關系的內容。該屬性獲取一個包含指定元素的所有子元素的集合。值得注意的是如果當前元素無子節點，則屬性返回。 Element 對象提供了一系列的屬性和方法用來利用 DOM 元素樹結構中元素的關系實現遍歷其中的元素。關于元素之間的關系，可以參考《DOM 元素樹》一...

codeGoogle 2019-08-21 12:00 評論0 收藏0
【EASYDOM系列教程】之Node介紹

摘要：對象的作用樹結構主要是依靠節點進行解析，稱為節點樹結構。對象的繼承鏈關系對象是繼承于對象的，是一個用于接收事件的對象。但需要注明作者及來源，并且不能用于商業。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Node 對象，該對象主要提供了用于解析 DOM 節點樹結構的屬性和方法。 Node 對象的作用 DOM 樹結構主要是依靠節點進行解析，...

oliverhuang 2019-08-20 18:16 評論0 收藏0
【EASYDOM系列教程】之 Element 對象

摘要：而標準規范中提供了對象，主要是依靠元素樹結構訪問和更新頁面的內容。值得注意的是所有的頁面的元素都是對象，而這個對象又是繼承于對象的。我們可以簡單地理解對象是對象的補充。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Element 對象，該對象提供了 HTML 頁面中所有元素所具有的屬性和方法。我們都知道 DOM 標準規范中提供了 Nod...

jeyhan 2019-08-21 11:55 評論0 收藏0
【EASYDOM系列教程】索引

摘要：系列教程是一套免費開源，任何人都可以免費學習分享，甚至可以進行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始，我們先來了解是什么的作用，以及瀏覽器的支持是怎么樣的。《EASYDOM》系列教程是一套免費、開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。本文是這套系列教程的索引（也就是目錄）: 第一回 DOM 介紹在最開始，我...

yanwei 2019-08-21 11:51 評論0 收藏0
【EASYDOM系列教程】之刪除節點

摘要：對象提供了方法實現從頁面中刪除指定節點。其語法結構如下在上述語法結構中，調用方法的表示參數的父節點，而參數則表示要刪除的那個節點。則用于存儲要刪除的節點的引用，即。 Node 對象提供了 removeChild() 方法實現從 HTML 頁面中刪除指定節點。其語法結構如下: var oldChild = node.removeChild(child); OR element.remov...

zzbo 2019-08-20 18:23 評論0 收藏0