XML 教程

XML 教程 XML 简介 XML 用途 XML 树结构 XML 语法 XML 元素 XML 属性 XML 命名空间 XML Display XML HttpRequest XML Parser XML DOM XML XPath XML XSLT XML XQuery XML XLink XML 验证器 XML DTD XML Schema XML 服务器 XML 实例 XML 测验

XML AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例

XML DOM

DOM 简介 DOM 节点 DOM 访问节点 DOM 节点信息 DOM 节点列表 DOM 节点遍历 DOM 节点导航 DOM 获取节点 DOM 更改节点 DOM 删除节点 DOM 替换节点 DOM 创建节点 DOM 添加节点 DOM 克隆节点 DOM 实例

XPath 教程

XPath 简介 XPath 节点 XPath 语法 XPath 轴(Axes) XPath 运算符 XPath 实例

XSLT 教程

XSLT 简介 XSL 语言 XSLT 转换 XSLT <template> XSLT <value-of> XSLT <for-each> XSLT <sort> XSLT <if> XSLT <choose> XSLT Apply XSLT 客户端 XSLT 服务端 XSLT 编辑 XML XSLT 实例

XQuery 教程

XQuery 简介 XQuery 实例 XQuery FLWOR 表达式 XQuery FLWOR + HTML XQuery 术语 XQuery 语法 XQuery 添加元素和属性 XQuery 选择和过滤 XQuery 函数

XML DTD

DTD 简介 DTD 构建模块 DTD 元素 DTD 属性 DTD 元素 vs. 属性 DTD 实体 DTD 实例

XSD Schema

XSD 简介 XSD How To XSD <schema> XSD 元素 XSD 属性 XSD 限制

XSD Complex

XSD 复杂元素 XSD 空元素 XSD 仅限元素 XSD 纯文本元素 XSD 混合 XSD 指示器 XSD <any> XSD <anyAttribute> XSD 替换 XSD 实例

XSD 数据类型

XSD 字符串 XSD 日期 XSD 数值 XSD 杂项 XSD 参考手册

Web Services

XML Services 简介 XML WSDL XML SOAP XML RDF XML RSS

参考手册

DOM 节点类型 DOM 节点 DOM NodeList DOM NamedNodeMap DOM 文档 DOM 元素 DOM 属性 DOM 文本 DOM CDATA DOM 注释 DOM XMLHttpRequest DOM 解析器 XSLT 元素 XSLT/XPath 函数


XML DOM - 导航节点

可以使用节点关系导航节点。

×

Header


导航DOM节点

通过节点之间的关系访问节点树中的节点,通常称为"导航节点"。

在XML DOM中,节点关系定义为节点的属性:

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

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

Node tree


DOM - 父节点

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

实例

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

实例说明:

  1. 将"books.xml" 加载到 xmlDoc 中
  2. 获取第一个<book>元素
  3. 输出"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。如果同级节点不是元素节点,它将移动到下一个节点,直到找到元素节点。这样,在InternetExplorer和Firefox中的结果都是一样的。


得到第一个子元素

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

实例

<!DOCTYPE html>
<html>
<body>

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

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
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;
}

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

</body>
</html>

输出:

title
尝试一下 »

实例说明:

  1. 将"books.xml"加载到 xmlDoc 中
  2. 使用第一个<book>节点上的函数get_firstChild获取第一个子节点,该子节点是元素节点
  3. 输出作为元素节点的第一个子节点的节点名

更多实例

lastChild()
此实例使用lastChild()方法和自定义函数获取节点的最后一个子节点

nextSibling()
本例使用nextSibling()方法和自定义函数来获取节点的下一个同级节点

previousSibling()
此实例使用previousSibling()方法和自定义函数获取节点的上一个同级节点