JavaScript如何訪問節(jié)點(diǎ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電腦。

通過節(jié)點(diǎn)之間的樹形關(guān)系，我們可以定位文檔中每個(gè)節(jié)點(diǎn)。DOM 為 Node 類型定義如下屬性，以方便 JavaScript 對(duì)文檔樹中每個(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)，用戶可以通過下標(biāo)位置來訪問這些節(jié)點(diǎn)。雖然 childNodes 可以通過方括號(hào)語(yǔ)法來訪問 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 屬性，該屬性指向文檔樹中的父節(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)。不過 document 節(jié)點(diǎn)沒有父節(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)。如果沒有同屬一個(gè)父節(jié)點(diǎn)的相鄰節(jié)點(diǎn)，則它們將返回 null。

【5】ownerDocument

在 DOM 文檔樹中，可以使用 ownerDocument 屬性訪問根節(jié)點(diǎn)。

node.ownerDocument

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

document.documentElement

【