XML DOM - 導(dǎo)航節(jié)點(diǎn)
可通過(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)系：
DOM - 父節(jié)點(diǎn)
所有的節(jié)點(diǎn)都僅有一個(gè)父節(jié)點(diǎn)。下面的代碼導(dǎo)航到 <book> 的父節(jié)點(diǎn)：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解釋：
使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中
獲取第一個(gè) <book> 元素
輸出 "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)類型：
{
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í)例
<!DOCTYPE html>
<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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解釋：
使用 loadXMLDoc() 把 "books.xml" 載入 xmlDoc 中
在第一個(gè) <book> 元素上使用 get_firstChild 函數(shù)，來(lái)獲取第一個(gè)子節(jié)點(diǎn)（屬于元素節(jié)點(diǎn)）
輸出第一個(gè)子節(jié)點(diǎn)（屬于元素節(jié)點(diǎn)）的節(jié)點(diǎn)名稱
更多實(shí)例
lastChild()
本例使用 lastChild() 方法和一個(gè)自定義函數(shù)來(lái)獲取節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
實(shí)例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
<script>
//check if the first node is an element node
function get_lastChild(n)
{
y=n.lastChild;
while (y.nodeType!=1)
{
y=y.previousSibling;
}
return y;
}
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=get_lastChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
nextSibling()
本例使用 nextSibling() 方法和一個(gè)自定義函數(shù)來(lái)獲取節(jié)點(diǎn)的下一個(gè)同級(jí)節(jié)點(diǎn)
實(shí)例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
<script>
//check if the first node is an element node
function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
{
y=y.nextSibling;
}
return y;
}
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=get_nextSibling(xmlDoc.getElementsByTagName("title")[0]);
document.write(x.nodeName);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
previousSibling()
本例使用 previousSibling() 方法和一個(gè)自定義函數(shù)來(lái)獲取節(jié)點(diǎn)的上一個(gè)同級(jí)節(jié)點(diǎn)
實(shí)例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
<script>
//check if the first node is an element node
function get_previousSibling(n)
{
y=n.previousSibling;
while (y.nodeType!=1)
{
y=y.previousSibling;
}
return y;
}
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=get_previousSibling(xmlDoc.getElementsByTagName("price")[0]);
document.write(x.nodeName);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例