JavaScript中怎么訪問節點

JavaScript中怎么訪問節點，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

訪問節點的方法：1、使用ownerDocument屬性；2、使用parentNode屬性；3、使用childNodes屬性；4、使用firstChild屬性；5、使用lastChild屬性；6、使用nextSibling屬性等。

通過節點之間的樹形關系，我們可以定位文檔中每個節點。DOM 為 Node 類型定義如下屬性，以方便 JavaScript 對文檔樹中每個節點進行遍歷。

• ownerDocument：返回當前節點的根元素（document 對象）

• parentNode：返回當前節點的父節點。所有的節點都僅有一個父節點

• childNodes：返回當前節點的所有子節點的節點列表

• firstChild：返回當前節點的首個子節點

• lastChild：返回當前節點的最后一個子節點

• nextSibling：返回當前節點之后相鄰的同級節點

• previousSibling：返回當前節點之前相鄰的同級節點

【1】childNodes

每個節點都有一個 childNodes 屬性，該屬性保存著一個 nodeList 對象，它表示所有子節點的列表。

nodeList 是一種類數組對象，用于保存一組有序的節點，用戶可以通過下標位置來訪問這些節點。雖然 childNodes 可以通過方括號語法來訪問 nodeList 的值，而且 childNodes 對象包含一個 length 屬性，它表示列表包含子節點的個數（長度），但 childNodes 并不是數組，不能夠直接調動數組的方法。

【2】parentNode

每個節點都有一個 parentNode 屬性，該屬性指向文檔樹中的父節點。包含在 childNodes 列表中的所有節點都具有相同的父節點，因此它們的 parentNode 屬性都指向同一個節點。

parentNode 屬性返回節點永遠是一個元素類型節點，因為只有元素節點才可能包含子節點。不過 document 節點沒有父節點，document 節點的 parentNode 屬性將返回 null。

【3】firstChild 和 lastChild

firstChild 屬性返回第一個子節點，lastChild 屬性返回最后一個子節點。文本節點和屬性節點的 firstChild 和 lastChild 屬性返回值總是為 null。

注意：firstChild 等價于 childNodes 的第一個元素，lastChild 屬性值等價于 childNodes 的最后一個元素。

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1]  = node.lastChild

【4】nextSibling 和 previousSibling

nextSibling 屬性返回下一個相鄰節點，previousSibling 屬性返回上一個相鄰節點。如果沒有同屬一個父節點的相鄰節點，則它們將返回 null。

【5】ownerDocument

在 DOM 文檔樹中，可以使用 ownerDocument 屬性訪問根節點。

node.ownerDocument

通過每個節點的 ownerDocument 屬性，我們可以不必通過層層回溯的方式到達頂端，而是可以直接訪問文檔節點。另外，用戶也可以使用下面方式訪問根節點。

document.documentElement

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。