Javascript DOM遍歷

在編寫前端頁面的時候，我們時常需要遍歷頁面上的DOM元素。Javascript為我們提供了一些方便的方法來實(shí)現(xiàn)DOM遍歷。本文將介紹Javascript DOM遍歷的相關(guān)知識及其使用方法。

一、childNodes和children屬性

//獲取父元素的所有子節(jié)點(diǎn)
var parent = document.getElementById("parent");
var childNodes = parent.childNodes;
//獲取父元素的所有子元素節(jié)點(diǎn)
var children = parent.children;

childNodes是一個只讀屬性，返回一個包含所有子節(jié)點(diǎn)的實(shí)時-live、非靜態(tài)-NodeList。children是一個只讀屬性，返回一個包含元素的所有子元素的HTMLCollection，只包括元素節(jié)點(diǎn)。

二、parentNode、nextSibling和previousSibling屬性

//獲取當(dāng)前元素的父元素
var parent = currentElement.parentNode;
//獲取當(dāng)前元素的下一個兄弟元素
var nextSibling = currentElement.nextSibling;
//獲取當(dāng)前元素的上一個兄弟元素
var previousSibling = currentElement.previousSibling;

parentNode是一個只讀屬性，返回當(dāng)前元素的父元素。nextSibling和previousSibling是只讀屬性，分別返回當(dāng)前元素的下一個兄弟元素和上一個兄弟元素。

三、firstChild和lastChild屬性

//獲取父元素的第一個子節(jié)點(diǎn)
var firstChild = parentElement.firstChild;
//獲取父元素的最后一個子節(jié)點(diǎn)
var lastChild = parentElement.lastChild;

firstChild和lastChild是只讀屬性，分別返回父元素的第一個子節(jié)點(diǎn)和最后一個子節(jié)點(diǎn)。

四、querySelectorAll

//獲取頁面上所有div元素
var divs = document.querySelectorAll("div");
//獲取指定父元素下的所有子元素
var children = parentElement.querySelectorAll("*");

querySelectorAll方法返回文檔中與指定的選擇器組或選擇器匹配的所有元素列表。它返回一個靜態(tài)的NodeList。

五、遍歷DOM樹

function traverse(node) {
if(node.nodeType === Node.ELEMENT_NODE) {
console.log(node.tagName);
}
node = node.firstChild;
while(node) {
traverse(node);
node = node.nextSibling;
}
}
//遍歷整個document樹
traverse(document);

可以使用遞歸函數(shù)來遍歷整個DOM樹。在上面的示例中，遍歷DOM樹時，首先判斷節(jié)點(diǎn)是否為元素節(jié)點(diǎn)，然后遍歷其子節(jié)點(diǎn)。

總結(jié)：

Javascript提供了多種方法來遍歷DOM元素，我們需要根據(jù)自己的需求選擇。同時，應(yīng)該注意：childNodes、nextSibling、parentNode、querySelectorAll等方法獲取到的元素集合，都是只讀實(shí)時的。而firstChild、lastChild等方法返回的節(jié)點(diǎn)，是非實(shí)時的。另外，我們可以通過遞歸遍歷DOM樹來解決需要遍歷整個樹的情況。