上一节:
下一节:

  DOM 遍历节点树

  • 定义和使用

    遍历是指遍历或遍历节点树。
    通常，您想循环一个XML文档，例如：当您要提取每个元素的值时。这称为“遍历节点树”
    下面的示例循环遍历<book>的所有子节点，并显示其名称和值： 
    <!DOCTYPE html>
<html>
<body>

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

<script>
  var x, i ,xmlDoc;
  var txt = "";
  var text = "<book>" +
  "<title>中国历史手册</title>" +
  "<author>Giada De Laurentiis</author>" +
  "<year>2005</year>" +
  "</book>";          

  parser = new DOMParser();
  xmlDoc = parser.parseFromString(text,"text/xml");

  // documentElement始终代表根节点
  x = xmlDoc.documentElement.childNodes;
  for (i = 0; i < x.length ;i++) {
      txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>
    输出结果： 
    title: 中国历史手册
author: Giada De Laurentiis
year: 2005
    尝试一下
    示例说明：
    • 将XML字符串加载到xmlDoc中
    • 获取根元素的子节点
    • 对于每个子节点，输出文本节点的节点名称和节点值
    浏览器在 DOM 解析方面的差异，所有现代浏览器都支持 W3C DOM 规范。
    但是，浏览器之间存在一些差异。 一个重要的区别是：他们处理空白和换行符的方式。

  • DOM-空白和换行

    XML 通常在节点之间包含换行符或空白字符。 使用简单的编辑器（如记事本）编辑文档时，通常会出现这种情况。
    以下示例（由记事本编辑）在每行和每个子节点前面的两个空格之间包含 CR/LF（换行）： 
    <book>
  <title>中国历史手册</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
</book>
    Internet Explorer 9和更早版本不会将空白或新行视为文本节点，而其他浏览器则不会。
    以下示例将输出根元素（books.xml）具有的子节点数。 IE9和更早版本将输出4个子节点，而IE10和更高版本以及其他浏览器将输出9个子节点： 
    function myFunction(xml) {
var xmlDoc = xml.responseXML;
    x = xmlDoc.documentElement.childNodes;
    document.getElementById("demo").innerHTML =
    "子节点数: " + x.length;
}
    尝试一下

  • PCDATA-解析的字符数据

    XML 解析器通常解析 XML 文档中的所有文本。
    解析 XML 元素时，还将解析 XML 标记之间的文本： 
    <message>此文本也被解析</message>
    解析器执行此操作是因为XML元素可以包含其他元素，如本例所示，其中<name>元素包含其他两个元素（第一个和最后一个）： 
    <name><first>Bill</first><last>Gates</last></name>
    解析器会将其分解为如下子元素： 
    <name>
  <first>Bill</first>
  <last>Gates</last>
</name>
    解析字符数据（PCDATA）是一个有关将由 XML 解析器解析的文本数据的术语。

  • CDATA-字符数据

    术语 CDATA 用于不应该由 XML 解析器解析的文本数据。
    XML 元素中的字符 "<" 和 "＆" 是非法的。
    "<" 将产生错误，因为解析器将其解释为新元素的开始。
    "＆" 将产生错误，因为解析器将其解释为字符实体的开始。
    某些文本（例如JavaScript代码）包含许多 "<" 或 "＆"字符。 为了避免错误，可以将脚本代码定义为 CDATA。
    解析器将忽略 CDATA 节中的所有内容。
    CDATA 节以 " 结尾： 
    <script>
  <![CDATA[
  function matchwo(a,b) {
      if (a < b && a < 0) {
          return 1;
      } else {
          return 0;
      }
  }
  ]]>
</script>
    在上面的示例中，解析器将忽略CDATA部分中的所有内容。
    有关 CDATA 部分的说明：
    CDATA 节不能包含字符串 “]]>”。 不允许使用嵌套的 CDATA 节。
    标记 CDATA 节末尾的 “]]>” 不能包含空格或换行符。
上一节:
下一节: