XMLHttpRequest 对象按钮单击只加载第一个子节点？？？如何获得所有节点？答案

【问题标题】：XMLHttpRequest Object button click only loading first child node???? how to get ALL nodes?XMLHttpRequest 对象按钮单击只加载第一个子节点？？？如何获得所有节点？
【发布时间】：2021-11-25 07:56:12
【问题描述】：

当我放入父节点时，没有任何内容填充 - 但是当我放入根节点（“dataroot”）时，第一个子节点出现在表上 - 即使有很多子/兄弟节点。这是 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>
        Pharma-Find
    </title>
    <link rel="stylesheet" type="text/css" href="getDrugs.css">
    <script type = "text/javascript" src="getDrugs.js"></script>
</head>

<body>
    <button type="button" onclick="loadXMLDoc()">Pharma Find</button>
    <br><br>
    <table id="demo"></table>
</body>
</html>

这是JS：

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "drugA.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Generic Brand</th><th>Brand Name</th><th>lnk</th><th>purpose</th><th>DEASch</th><th>Category</th><th>Study Topic</th></tr>";
  var x = xmlDoc.getElementsByTagName("dataroot");
  for (i = 0; i <x.length; i++) { 
    table +=
    "<tr><td>" +
    x[i].getElementsByTagName("GenericName")[0].childNodes[0].nodeValue + 
    "</td><td>" +
    x[i].getElementsByTagName("BrandName")[0].childNodes[0].nodeValue +
    "</td><td>"+
    x[i].getElementsByTagName("lnk")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Purpose")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("DEASch")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("StudyTopic")[0].childNodes[0].nodeValue + "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

【问题讨论】：

那么 XML 示例的外观究竟如何？

标签： javascript ajax xml

【解决方案1】：

您可以使用查询选择器和 Xpath 表达式从 XML 文档中获取数据。要获取元素（或任何其他节点）内的文本，请使用 textContent 属性。

对于示例，我添加了Product 作为项目元素节点以获得有效的 XML 并删除了大部分子元素。两个元素应该足以证明它是如何工作的。

查询选择器使用 CSS 选择器，可以返回元素。

const data = getXMLDocument();
const dataNodes = data.querySelectorAll('Product');

// fetch the table body
const tbody = document.querySelector('#OutputTarget tbody');
// remove all current child nodes
let node;
while (node = tbody.firstChild) {
  node.remove();
}

dataNodes.forEach(
  (product) => {
    // create and append a new tr
    const tr = tbody.appendChild(
      document.createElement('tr')
    );
    tr
      .appendChild(document.createElement('td'))
      .textContent = product.querySelector(':scope > GenericName')?.textContent
    tr
      .appendChild(document.createElement('td'))
      .textContent = product.querySelector(':scope > BrandName')?.textContent
  }
);

function getXMLDocument() {
  const xmlString = `<dataroot>
      <Product>
        <GenericName>One</GenericName>
        <BrandName>Awesome</BrandName>   
      </Product>
      <Product>
        <GenericName>Two</GenericName>
        <BrandName>Faboulous</BrandName>   
      </Product>
    </dataroot>`;
  return (new DOMParser()).parseFromString(xmlString, 'application/xml');
}

<table id="OutputTarget">
  <thead>
    <tr><th>Generic Brand</th><th>Brand Name</th></tr>
  </thead>
  <tbody>

  </tbody>
</table>

使用 Xpath 表达式会更冗长一些。但是表达式允许更具体的条件，支持命名空间并且可以直接返回值。

const data = getXMLDocument();
const dataNodes = data.evaluate(
    '//Product', 
    data, 
    null, 
    XPathResult.ANY_TYPE, 
    null
);

// fetch the table body
const tbody = document.querySelector('#OutputTarget tbody');
// remove all current child nodes
let node;
while (node = tbody.firstChild) {
  node.remove();
}

// iterate the returned list
let productNode = dataNodes.iterateNext();
while (productNode) {
  // create and append a new tr
  const tr = tbody.appendChild(
    document.createElement('tr')
  );
  tr
    .appendChild(document.createElement('td'))
    .textContent = data.evaluate(
      'string(GenericName)', productNode, null, XPathResult.STRING_TYPE, null
    ).stringValue;
  tr
    .appendChild(document.createElement('td'))
    .textContent = data.evaluate(
      'string(BrandName)', productNode, null, XPathResult.STRING_TYPE, null
    ).stringValue;
  
  productNode = dataNodes.iterateNext();
}

function getXMLDocument() {
  const xmlString = `<dataroot>
      <Product>
        <GenericName>One</GenericName>
        <BrandName>Awesome</BrandName>   
      </Product>
      <Product>
        <GenericName>Two</GenericName>
        <BrandName>Faboulous</BrandName>   
      </Product>
    </dataroot>`;
  return (new DOMParser()).parseFromString(xmlString, 'application/xml');
}

<table id="OutputTarget">
  <thead>
    <tr><th>Generic Brand</th><th>Brand Name</th></tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

【讨论】：