时间戳

首页 > 解决方案 > XML DOM 循环遍历元素节点

javascript - XML DOM 循环遍历元素节点

问题描述

我正在做 W3 XML DOM 教程。我不明白为什么迭代会在输出中产生 1、3、5、7。我了解其他所有内容（我想！）有人可以帮忙解释一下吗？谢谢。

<!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 x, y, i, xlen, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("book")[0];
    xlen = x.childNodes.length;
    y = x.firstChild;
    txt = "";
    for (i = 0; i < xlen; i++) {
        if (y.nodeType == 1) {
            txt += i + " " + y.nodeName + "<br>";
        }
        y = y.nextSibling;
    }
    document.getElementById("demo").innerHTML = txt; 
}
</script>

</body>
</html>

输出是：

1 title
3 author
5 year
7 price

你好安迪，这是 xml DOM 文件，它来自https://www.w3schools.com/xml/dom_nodes.asp

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
  <book category="web" cover="paperback">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

针对 Carlos22 的回答的补充评论。对不起，卡洛斯，我还是不明白。

(y.nodeType ==1)将始终返回 true，因为第一次出现的子<book>元素都是 type element (nodeType = 1)

第一个循环 i = 0，所以 txt 的值应该是 0 title

第二个循环 i = 1，所以0 title应该与1 author字符串 txt 的值连接，现在是0 title 1 author

第三个循环 i = 2 txt 包含字符串0 title 1 author 2 year等等。

我有时会变得非常愚蠢，所以请原谅！

标签： javascriptxmldom

解决方案

您的代码仅评估“元素节点”，因为if (y.nodeType == 1).

这是所有节点的示例：

const xml = `<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
  <book category="web" cover="paperback">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>`;

function getXmlFromText(xml) {
  parser = new DOMParser();
  return parser.parseFromString(xml, "text/xml");
}

function getNodeTypeStr(nodeType) {
  if (nodeType == 1) return 'ELEMENT_NODE';
  if (nodeType == 3) return 'TEXT_NODE';
  return 'Read the DOCS: https://www.w3schools.com/xml/dom_nodetype.asp';
}

function myFunction(xmlDoc) {
  var x, y, i, xlen, txt;
  //xmlDoc = xml.responseXML;
  x = xmlDoc.getElementsByTagName("book")[0];
  xlen = x.childNodes.length;
  y = x.firstChild;
  txt = ""; var txt2 = '';
  for (i = 0; i < xlen; i++) {
    if (y.nodeType == 1) {
      txt += i + " " + y.nodeName + "<br>";
    }
    txt2 += i + ' - ' + y.nodeName + ' - ' + getNodeTypeStr(y.nodeType) + ' - ' + y.nodeValue + '<br>';
    y = y.nextSibling;
  }
  document.getElementById("demo").innerHTML = txt;
  document.getElementById("allnodes").innerHTML = txt2;
}

myFunction(getXmlFromText(xml));
div {
 padding: 2px;
 border: 1px solid gray;
 margin-bottom: 4px;
}
Only element nodes:
<div id="demo"></div>
All nodes:
<div id="allnodes"></div>

打包的 XML 示例：

const xml = `<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="cooking">
    <title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
  <book category="web" cover="paperback">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>`;

function getXmlFromText(xml) {
  parser = new DOMParser();
  return parser.parseFromString(xml, "text/xml");
}

function getNodeTypeStr(nodeType) {
  if (nodeType == 1) return 'ELEMENT_NODE';
  if (nodeType == 3) return 'TEXT_NODE';
  return 'Read the DOCS: https://www.w3schools.com/xml/dom_nodetype.asp';
}

function myFunction(xmlDoc) {
  var x, y, i, xlen, txt;
  //xmlDoc = xml.responseXML;
  x = xmlDoc.getElementsByTagName("book")[0];
  xlen = x.childNodes.length;
  y = x.firstChild;
  txt = ""; var txt2 = '';
  for (i = 0; i < xlen; i++) {
    if (y.nodeType == 1) {
      txt += i + " " + y.nodeName + "<br>";
    }
    txt2 += i + ' - ' + y.nodeName + ' - ' + getNodeTypeStr(y.nodeType) + ' - ' + y.nodeValue + '<br>';
    y = y.nextSibling;
  }
  document.getElementById("demo").innerHTML = txt;
  document.getElementById("allnodes").innerHTML = txt2;
}

myFunction(getXmlFromText(xml));
div {
 padding: 2px;
 border: 1px solid gray;
 margin-bottom: 4px;
}
Only element nodes:
<div id="demo"></div>
All nodes:
<div id="allnodes"></div>

推荐阅读