XML DOM – 導(dǎo)航節(jié)點(diǎn)

2018-02-11 16:15 更新

XML DOM - 導(dǎo)航節(jié)點(diǎn)

DOM 每個(gè)節(jié)點(diǎn)中的聯(lián)系可以用于在節(jié)點(diǎn)樹(shù)中導(dǎo)航。

可通過(guò)使用節(jié)點(diǎn)間的關(guān)系對(duì)節(jié)點(diǎn)進(jìn)行導(dǎo)航。


導(dǎo)航 DOM 節(jié)點(diǎn)

通過(guò)節(jié)點(diǎn)間的關(guān)系訪問(wèn)節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn),通常稱為導(dǎo)航節(jié)點(diǎn)("navigating nodes")。

在 XML DOM 中,節(jié)點(diǎn)的關(guān)系被定義為節(jié)點(diǎn)的屬性:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

下面的圖像展示了 books.xml 中節(jié)點(diǎn)樹(shù)的一個(gè)部分,并說(shuō)明了節(jié)點(diǎn)之間的關(guān)系:

Node tree


DOM - 父節(jié)點(diǎn)

所有的節(jié)點(diǎn)都僅有一個(gè)父節(jié)點(diǎn)。下面的代碼導(dǎo)航到 <book> 的父節(jié)點(diǎn):

實(shí)例

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);

嘗試一下 ?

實(shí)例解釋:

  1. 使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中
  2. 獲取第一個(gè) <book> 元素
  3. 輸出 "x" 的父節(jié)點(diǎn)的節(jié)點(diǎn)名稱

避免空的文本節(jié)點(diǎn)

Firefox 以及其他一些瀏覽器,把空的空白或換行當(dāng)作文本節(jié)點(diǎn),而 Internet Explorer 不會(huì)這么做。

這會(huì)在使用以下屬性:firstChild、lastChild、nextSibling、previousSibling 時(shí)產(chǎn)生一個(gè)問(wèn)題。

為了避免導(dǎo)航到空的文本節(jié)點(diǎn)(元素節(jié)點(diǎn)之間的空格和換行符),我們使用一個(gè)函數(shù)來(lái)檢查節(jié)點(diǎn)類型:

function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
{
y=y.nextSibling;
}
return y;
}

上面的函數(shù)允許您使用 get_nextSibling(node)來(lái)代替 node.nextSibling 屬性。

代碼解釋:

元素節(jié)點(diǎn)的類型是 1。如果同級(jí)節(jié)點(diǎn)不是元素節(jié)點(diǎn),就移動(dòng)到下一個(gè)節(jié)點(diǎn),直到找到元素節(jié)點(diǎn)為止。通過(guò)這個(gè)辦法,在 Internet Explorer 和 Firefox 中,都可以得到相同的結(jié)果。


獲取第一個(gè)子元素

下面的代碼顯示第一個(gè) <book> 的第一個(gè)元素:

實(shí)例

<html>
<head>
<script src="loadxmldoc.js">
</script>
<script>
//check if the first node is an element node
function get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
{
y=y.nextSibling;
}
return y;
}
</script>
</head>

<body>
<script>
xmlDoc=loadXMLDoc("books.xml");

x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html>

輸出:

title

嘗試一下 ?

實(shí)例解釋:

  1. 使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中
  2. 在第一個(gè) <book> 元素上使用 get_firstChild 函數(shù),來(lái)獲取第一個(gè)子節(jié)點(diǎn)(屬于元素節(jié)點(diǎn))
  3. 輸出第一個(gè)子節(jié)點(diǎn)(屬于元素節(jié)點(diǎn))的節(jié)點(diǎn)名稱

實(shí)例s

更多實(shí)例

lastChild()
本例使用 lastChild() 方法和一個(gè)自定義函數(shù)來(lái)獲取節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)

nextSibling()
本例使用 nextSibling() 方法和一個(gè)自定義函數(shù)來(lái)獲取節(jié)點(diǎn)的下一個(gè)同級(jí)節(jié)點(diǎn)

previousSibling()
本例使用 previousSibling() 方法和一個(gè)自定義函數(shù)來(lái)獲取節(jié)點(diǎn)的上一個(gè)同級(jí)節(jié)點(diǎn)

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)