訪問節(jié)點的方法:1、使用ownerDocument屬性;2、使用parentNode屬性;3、使用childNodes屬性;4、使用firstChild屬性;5、使用lastChild屬性;6、使用nextSibling屬性等。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
通過節(jié)點之間的樹形關(guān)系,我們可以定位文檔中每個節(jié)點。DOM 為 Node 類型定義如下屬性,以方便 JavaScript 對文檔樹中每個節(jié)點進行遍歷。
- ownerDocument:返回當(dāng)前節(jié)點的根元素(document 對象)
- parentNode:返回當(dāng)前節(jié)點的父節(jié)點。所有的節(jié)點都僅有一個父節(jié)點
- childNodes:返回當(dāng)前節(jié)點的所有子節(jié)點的節(jié)點列表
- firstChild:返回當(dāng)前節(jié)點的首個子節(jié)點
- lastChild:返回當(dāng)前節(jié)點的最后一個子節(jié)點
- nextSibling:返回當(dāng)前節(jié)點之后相鄰的同級節(jié)點
- previousSibling:返回當(dāng)前節(jié)點之前相鄰的同級節(jié)點
【1】childNodes
每個節(jié)點都有一個 childNodes 屬性,該屬性保存著一個 nodeList 對象,它表示所有子節(jié)點的列表。
nodeList 是一種類數(shù)組對象,用于保存一組有序的節(jié)點,用戶可以通過下標(biāo)位置來訪問這些節(jié)點。雖然 childNodes 可以通過方括號語法來訪問 nodeList 的值,而且 childNodes 對象包含一個 length 屬性,它表示列表包含子節(jié)點的個數(shù)(長度),但 childNodes 并不是數(shù)組,不能夠直接調(diào)動數(shù)組的方法。
【2】parentNode
每個節(jié)點都有一個 parentNode 屬性,該屬性指向文檔樹中的父節(jié)點。包含在 childNodes 列表中的所有節(jié)點都具有相同的父節(jié)點,因此它們的 parentNode 屬性都指向同一個節(jié)點。
parentNode 屬性返回節(jié)點永遠是一個元素類型節(jié)點,因為只有元素節(jié)點才可能包含子節(jié)點。不過 document 節(jié)點沒有父節(jié)點,document 節(jié)點的 parentNode 屬性將返回 null。
【3】firstChild 和 lastChild
firstChild 屬性返回第一個子節(jié)點,lastChild 屬性返回最后一個子節(jié)點。文本節(jié)點和屬性節(jié)點的 firstChild 和 lastChild 屬性返回值總是為 null。
注意:firstChild 等價于 childNodes 的第一個元素,lastChild 屬性值等價于 childNodes 的最后一個元素。
node.childNodes[0] = node.firstChild node.childNodes[node.childNodes.length-1] = node.lastChild
【4】nextSibling 和 previousSibling
nextSibling 屬性返回下一個相鄰節(jié)點,previousSibling 屬性返回上一個相鄰節(jié)點。如果沒有同屬一個父節(jié)點的相鄰節(jié)點,則它們將返回 null。
【5】ownerDocument
在 DOM 文檔樹中,可以使用 ownerDocument 屬性訪問根節(jié)點。
node.ownerDocument
通過每個節(jié)點的 ownerDocument 屬性,我們可以不必通過層層回溯的方式到達頂端,而是可以直接訪問文檔節(jié)點。另外,用戶也可以使用下面方式訪問根節(jié)點。
document.documentElement
【