加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > XML基础

XML DOM 访问节点

XML基础 2022-05-25 16:05:35小码哥的IT人生shichen

XML DOM 访问节点

通过 DOM，您能够访问 XML 文档中的每个节点。

实例

下面的例子使用 XML 文件 books.xml 函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

完整实例【使用节点列表中的下标号来访问节点】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title");
document.write(x[2].childNodes[0].nodeValue);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

本例使用 getElementsByTagname() 方法来获得 "books.xml" 中的第三个 <title> 元素。

完整实例【使用 length 属性来循环节点】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
  {
  document.write(x[i].childNodes[0].nodeValue);
  document.write("<br />");
  }
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

本例使用 length 属性来循环 "books.xml" 中的所有 <title> 元素。

完整实例【查看元素的节点类型】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
document.write(xmlDoc.documentElement.nodeName);
document.write("<br />");
document.write(xmlDoc.documentElement.nodeType);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

本例使用 nodeType 属性来获得 "books.xml" 中根元素的节点类型。

完整实例【循环元素节点】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
  {//Process only element nodes (type 1)
  document.write(x[i].nodeName);
  document.write("<br />");
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

本例使用 nodeType 属性来处理 "books.xml" 中的元素节点。

完整实例【使用节点的关系来循环元素节点】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i<x.length;i++)
{
if (y.nodeType==1)
  {//Process only element nodes (type 1)
  document.write(y.nodeName + "<br />");
  }
y=y.nextSibling;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

本例使用 nodeType 属性和 nextSibling 属性来处理 "books.xml" 中的元素节点。

访问节点

您可以通过三种方法来访问节点：

  1. 通过使用 getElementsByTagName() 方法
  2. 通过循环（遍历）节点树
  3. 通过利用节点的关系在节点树中导航

getElementsByTagName() 方法

getElementsByTagName() 返回拥有指定标签名的所有元素。

语法

node.getElementsByTagName("tagname");

示例代码：

下面的例子返回 x 元素下的所有 <title> 元素：

x.getElementsByTagName("title");

请注意，上面的例子仅返回 x 节点下的 <title> 元素。要返回 XML 文档中的所有 <title> 元素，请使用：

xmlDoc.getElementsByTagName("title");

在这里，xmlDoc 就是文档本身（文档节点）。

DOM Node List

getElementsByTagName() 方法返回节点列表 (node list)。节点列表是节点的数组。

下面的代码通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，然后在变量 x 中存储 <title> 节点的一个列表：

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");

可通过下标访问 x 中的 <title> 元素。要访问第三个 <title>，您可以编写：

y=x[2];

 

完整实例【TIY】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title");
document.write(x[2].childNodes[0].nodeValue);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

注释：下标以 0 起始。

在本教程中稍后的章节，您将学到更多有关 Node List 的知识。

DOM Node List Length

length 属性定义节点列表的长度（即节点的数目）。

您能够通过使用 length 属性来循环一个节点列表：

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
  {
  document.write(x[i].childNodes[0].nodeValue);
  document.write("<br />");
  }

例子解释：

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc
  2. 取得所有 <title> 元素节点
  3. 输出每个 <title> 元素的文本节点的值

 

完整实例【TIY】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
  {
  document.write(x[i].childNodes[0].nodeValue);
  document.write("<br />");
  }
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Node Type

XML 文档的 documentElement 属性是根节点。

节点的 nodeName 属性是节点的名称。

节点的 nodeType 属性是节点的类型。

您将在本教程的下一节中学习更多有关节点属性的知识。

 

完整实例【TIY】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
document.write(xmlDoc.documentElement.nodeName);
document.write("<br />");
document.write(xmlDoc.documentElement.nodeType);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

遍历节点

下面的代码循环根节点的子节点，同时也是元素节点：

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
  if (x[i].nodeType==1)
  {//Process only element nodes (type 1)
  document.write(x[i].nodeName);
  document.write("<br />");
  }
}

例子解释：

  1. 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获得根元素的子节点
  3. 检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点
  4. 如果是元素节点，则输出节点的名称

 

完整实例【TIY】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
  {//Process only element nodes (type 1)
  document.write(x[i].nodeName);
  document.write("<br />");
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

利用节点的关系进行导航

下面的代码通过利用节点的关系在节点树中进行导航：

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i<x.length;i++)
{
if (y.nodeType==1)
  {//Process only element nodes (type 1)
  document.write(y.nodeName + "<br />");
  }
y=y.nextSibling;
}
  1. 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 获得第一个 book 元素的子节点
  3. 把 "y" 变量设置为第一个 book 元素的第一个子节点
  4. 检查每个子节点的节点类型，如果节点类型是 "1"，则是元素节点
  5. 如果是元素节点，则输出该节点的名称
  6. 把 "y" 变量设置为下一个同级节点，并再次运行循环

 

完整实例【TIY】：

<html>
<head>
<script type="text/javascript" src="/demo/example/xdom/loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i<x.length;i++)
{
if (y.nodeType==1)
  {//Process only element nodes (type 1)
  document.write(y.nodeName + "<br />");
  }
y=y.nextSibling;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024