遍歷節點樹

2022-08-30 11:48:14 字數 1838 閱讀 3695

從以下屬性讀出來的資訊可以讓我們了解相鄰節點之間的關係。

nodelist = node.childnodes

這個屬性返回的陣列是乙個nodelist集合。這個nodelist集合裡的每個節點都是乙個節點物件。這些節點物件都有著nodetype、nodename、nodevalue等常見的節點屬性。

文字節點和屬性節點都不可能包含任何的子節點,所以他們的childnodes屬性永遠返回乙個空陣列。

如果只是想知道某個元素有沒有子節點,可以使用haschildnodes方法。

如果想知道某個元素有多少個節點,請使用childnodes陣列的length屬性:

node.childnodes.length

即使元素只有乙個子節點,childnodes屬性也將返回乙個節點陣列而不是返回乙個單個的節點,此時,childnodes陣列的length的長度值將是1,比如說,如果某個網頁上的document元素只有html元素這個子節點,那麼document.childnodes[0].nodename值將是html。

reference = node.firstchild

這個屬性返回乙個節點物件的引用指標,這個節點物件有nodetype、nodename、nodevalue等常見屬性。

文字節點和屬性節點不可能在包含任何的子節點,所以他們的firstchild屬性永遠會返回null。

firstchild是乙個唯讀屬性。

lastchild:屬性將返回乙個給定元素的最後乙個子節點:

reference = node.lastchild

這個屬性返回乙個節點對熊引用指標,這個節點物件都有著nodetype、nodename、nodevalue等常見節點屬性。

文字節點屬性和屬性節點屬性都不可能在包含任何子節點,所以lastchild屬性永遠返回null。

某個元素的lastchild屬性等價於元素childnodes節點集合的最後乙個節點:

refrence = node.childnodes[element.childnodes.lelgth-1]

如果想知道某個元素有沒有子節點,可以使用haschildnodes方法,如果某個節點沒有任何子節點,它的lastchild屬性將返回null。

lastchild屬性是乙個唯讀屬性。

reference = node.nextsibing

這個屬性返回乙個節點物件引用指標,這個節點物件都有著nodetype、nodename、nodevalue等常見屬性。

如果給定節點後面沒有同屬於父節點的節點,它的nextsibling屬性將返回null。

nextsibling屬性是乙個唯讀屬性。

parentnode屬性將返回乙個給定節點的父節點:

reference = node.parentnode

這個屬性返回乙個節點物件的引用指標,這個節點物件都有著nodetype、nodename、nodevalue等常見節點屬性。

parentnode屬性返回的節點永遠是乙個元素節點,因為只有元素節點才有可能包含子節點,唯一的例外是document節點,他沒有父節點,換句話說,document節點的parentnode屬性將返回null。

parentnode屬性是乙個唯讀屬性。

reference  = node.previoussibling

這個屬性返回前乙個節點物件的引用指標,這個節點物件都有著nodetype、nodename、nodevalue等常見節點屬性。

如果沒有前乙個元素節點返回null。

previoussibling屬性是乙個唯讀屬性。

JS遍歷DOM 節點樹的實現

本文將分享 dom 節點樹深度遍歷 廣度遍歷 假定我僅遍歷 body 且其結構如下 class container class left class menu class right class box1 class box2 遍歷完父節點的所有子節點的子節點的子節點.再遍歷其兄弟節點。輸出 sec...

jquery遍歷節點

遍歷所有的li標籤 function 通過each 遍歷指定的多個同類節點 function find 函式用於查抄子節點,如果找到了,則返回被找到的節點物件 var node ul find li alert node ul find li css color yellow 滑鼠事件 type t...

jquery遍歷節點

父類節點遍歷 parent 尋找節點的第乙個父節點 引數用於篩選元素 parents 尋找節點的所有父類節點 會一直找到document 引數用於篩選元素 parentuntil el 尋找兩個節點之間的所有父類節點 子類節點遍歷 children 尋找節點的第乙個子節點 引數用於篩選元素 find...