DOM 导航节点

定义和使用

通过节点之间的关系访问节点树中的节点，通常称为“导航节点”。

在 XML DOM 中，节点关系被定义为节点的属性：

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

下图说明了 books.xml 中节点树的一部分以及节点之间的关系：

DOM-父节点

所有节点都只有一个父节点。以下代码导航到<book>的父节点：

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

尝试一下

示例说明：

将 “books.xml” 加载到 xmlDoc 中
获取第一个<book>元素
输出父节点 “x” 的节点名称

避免文本节点为空

Firefox 和其他一些浏览器会将空白或新行视为文本节点，而 Internet Explorer 则不会。

在使用以下属性时，这会导致问题：firstChild，lastChild，nextSibling，previousSibling。

为了避免导航到空的文本节点（元素节点之间的空格和换行符），我们使用了一种检查节点类型的函数：

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

上面的函数允许您使用get_nextSibling（node）而不是属性node.nextSibling。

代码说明：

元素节点的类型为1。如果同级节点不是元素节点，它将移动到下一个节点，直到找到元素节点为止。这样，结果在 Internet Explorer 和 Firefox 中将是相同的。

获取第一个子元素

以下代码显示第一个<book>的第一个元素节点：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        myFunction(xhttp);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
    document.getElementById("demo").innerHTML = x.nodeName;
}

//检查第一个节点是否是元素节点
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>

</body>
</html>