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