【EASYDOM系列教程】之遍歷節(jié)點

BigNerdCoding 發(fā)布于2019-08-20 18:18 / 2751人閱讀

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

Node 對象提供了一系列的屬性和方法用來利用 DOM 節(jié)點樹結(jié)構(gòu)中節(jié)點的關(guān)系實現(xiàn)遍歷其中的節(jié)點。

關(guān)于節(jié)點之間的關(guān)系，可以參考《DOM樹結(jié)構(gòu)》一節(jié)有關(guān)節(jié)點之間關(guān)系的內(nèi)容。

獲取父節(jié)點

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

pNode = node.parentNode;

在上述語法結(jié)構(gòu)中，parentNode 屬性返回指定節(jié)點的父節(jié)點。

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

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

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

獲取父元素節(jié)點

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

parentElementNode = node.parentElement;

在上述語法結(jié)構(gòu)中，parentElement 屬性返回指定節(jié)點的父元素節(jié)點。

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

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

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

父節(jié)點與父元素節(jié)點的區(qū)別

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

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

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

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

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

上述代碼示例，輸出的結(jié)果如下:

獲取子節(jié)點

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

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

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

獲取所有子節(jié)點

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

var ndList = Node.childNodes;

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

值得注意的是: childNodes 屬性返回的是一個動態(tài)的 NodeList 對象。有關(guān)動態(tài) NodeList 的內(nèi)容，請參考《定位頁面元素》一節(jié)的內(nèi)容。

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

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

上述代碼示例，輸出的結(jié)果如下:

我們會發(fā)現(xiàn)，獲取到的所有子節(jié)點，除了真正的子節(jié)點

上述代碼示例的 DOM 節(jié)點樹結(jié)構(gòu)如下圖所示:

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

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

空白節(jié)點的解決方案

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

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

通過使用 getElementsByTagName() 方法實現(xiàn)相應(yīng)功能。

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

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

上述代碼示例運行的結(jié)果如下:

關(guān)于 DOM 中為什么要具有空白節(jié)點以及更完整的解決方案，可以參考 Mozilla 社區(qū)的《DOM 中的空白符》。

獲取第一個子節(jié)點

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

var first_child = node.firstChild;

在上述語法結(jié)構(gòu)中，firstChild 屬性返回的 first_child 表示當(dāng)前節(jié)點的第一個子節(jié)點的引用。

值得注意的是: 如果當(dāng)前節(jié)點無子節(jié)點，則 firstChild 屬性返回?null。

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

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

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

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

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

獲取最后一個節(jié)點

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

var last_child = node.lastChild;

在上述語法結(jié)構(gòu)中，lastChild 屬性返回的 last_child 表示當(dāng)前節(jié)點的最后一個子節(jié)點的引用。

值得注意的是: 如果當(dāng)前節(jié)點無子節(jié)點，則 lastChild 屬性返回?null。

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

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

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

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

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

獲取相鄰兄弟節(jié)點

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

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

獲取相鄰前面兄弟節(jié)點

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

previousNode = node.previousSibling;

在上述語法結(jié)構(gòu)中，previousSibling 屬性返回的 previousNode 表示當(dāng)前節(jié)點的前一個兄弟節(jié)點。

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

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

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

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

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

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

獲取相鄰后面兄弟節(jié)點

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

nextNode = node.nextSibling;

在上述語法結(jié)構(gòu)中，nextSibling 屬性返回的 nextNode 表示當(dāng)前節(jié)點的后一個兄弟節(jié)點。

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

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

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

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

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

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

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

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

云服務(wù)器 GPU云服務(wù)器系列之系列之二架構(gòu)之坑系列 linux系列教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84309.html

發(fā)表評論

登陸后可評論

0條評論

BigNerdCoding

男|高級講師

我要關(guān)注我要私信

TA的文章

IFIX上位機網(wǎng)絡(luò)測試畫面

閱讀 944·2021-11-23 09:51
【數(shù)據(jù)結(jié)構(gòu)初階】第八篇——二叉樹的鏈?zhǔn)浇Y(jié)構(gòu)（二叉樹的前、中和后序遍歷+層序遍歷+鏈?zhǔn)浇Y(jié)構(gòu)的實現(xiàn)+相關(guān)

閱讀 1004·2021-11-18 10:02
外貿(mào)建站選什么服務(wù)器比較好?外貿(mào)網(wǎng)站如何選擇服務(wù)器?

閱讀 1942·2021-09-10 11:27
??Pycharm常用快捷鍵【快查字典版】??爆肝總結(jié)??

閱讀 3153·2021-09-10 10:51
FCC 成都社區(qū)·前端周刊第 10 期

閱讀 791·2019-08-29 15:13
前端面試經(jīng)典題目匯總（持續(xù)更新中）

閱讀 2077·2019-08-29 11:32
CSS中一些利用偽類、偽元素和相鄰元素選擇器的技巧

閱讀 2509·2019-08-29 11:25
NPM酷庫046：cson-parser，解析CSON數(shù)據(jù)

閱讀 3055·2019-08-26 11:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【EASYDOM系列教程】之遍歷節(jié)點

相關(guān)文章

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

**【EASYDOM系列教程】之Node介紹**

**【EASYDOM系列教程】之 Element 對象**

**【EASYDOM系列教程】索引**

【EASYDOM系列教程】之刪除節(jié)點

發(fā)表評論

0條評論

BigNerdCoding

男|高級講師

TA的文章

IFIX上位機網(wǎng)絡(luò)測試畫面

【數(shù)據(jù)結(jié)構(gòu)初階】第八篇——二叉樹的鏈?zhǔn)浇Y(jié)構(gòu)（二叉樹的前、中和后序遍歷+層序遍歷+鏈?zhǔn)浇Y(jié)構(gòu)的實現(xiàn)+相關(guān)

外貿(mào)建站選什么服務(wù)器比較好?外貿(mào)網(wǎng)站如何選擇服務(wù)器?

??Pycharm常用快捷鍵【快查字典版】??爆肝總結(jié)??

FCC 成都社區(qū)·前端周刊第 10 期

前端面試經(jīng)典題目匯總（持續(xù)更新中）

CSS中一些利用偽類、偽元素和相鄰元素選擇器的技巧

NPM酷庫046：cson-parser，解析CSON數(shù)據(jù)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【EASYDOM系列教程】之遍歷節(jié)點

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！