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

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

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

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

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

獲取父節(jié)點(diǎn)

通過(guò) HTML 頁(yè)面中指定元素查找其父級(jí)節(jié)點(diǎn)，我們可以使用 Node 對(duì)象的 parentNode 屬性實(shí)現(xiàn):

pNode = node.parentNode;

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

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

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

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

獲取父元素節(jié)點(diǎn)

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

parentElementNode = node.parentElement;

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

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

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

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

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

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

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

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

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

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

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

獲取子節(jié)點(diǎn)

通過(guò) HTML 頁(yè)面中指定元素查找其子節(jié)點(diǎn)，我們可以通過(guò)以下 Node 對(duì)象的屬性實(shí)現(xiàn):

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

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

獲取所有子節(jié)點(diǎn)

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

var ndList = Node.childNodes;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

獲取第一個(gè)子節(jié)點(diǎn)

Node 對(duì)象提供了 firstChild 屬性用于獲取指定節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn):

var first_child = node.firstChild;

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

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

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

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

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

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

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

獲取最后一個(gè)節(jié)點(diǎn)

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

var last_child = node.lastChild;

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

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

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

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

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

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

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

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

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

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

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

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

previousNode = node.previousSibling;

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

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

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

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

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

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

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

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

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

nextNode = node.nextSibling;

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84309.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

BigNerdCoding

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

**【EASYDOM系列教程】之 Element 對(duì)象**

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

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

發(fā)表評(píng)論

0條評(píng)論

BigNerdCoding

男|高級(jí)講師

TA的文章

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

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

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

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

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

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

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

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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