Javascript：如何通过元素名称而不是 XML 树位置查找子节点？答案

【问题标题】：Javascript: how to find child nodes by element name instead of XML tree position?Javascript：如何通过元素名称而不是 XML 树位置查找子节点？
【发布时间】：2018-08-04 16:54:04
【问题描述】：

我有一个工作示例。目前，我正在通过它们在节点树中的假定位置来查找子节点值，但由于有时会丢失节点，所以这种方法不能完美地工作。通过元素名称而不是 XML 树位置查找子节点的最简单方法是什么？

var n = document.getElementById("myInputId");
n.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
});

function testResults() {
  const { value } = myInputId;
  const foundState = [...xmlDoc.querySelectorAll('STATE')]
    .find(possibleMatch => possibleMatch.textContent === value);
  const unit = foundState.parentElement;
  console.log(unit.innerHTML);
  document.getElementById("stateNode").innerHTML =     unit.children[0].textContent;
  document.getElementById("gdpNode").innerHTML = unit.children[1].textContent;
  document.getElementById("populationNode").innerHTML = unit.children[2].textContent;
/*how can I find a node based on its name rather than position in the XML tree?*/
  document.getElementById("codeNode").innerHTML = unit.children[3].textContent;
}

var parser, xmlDoc, x, i;
var text =
  "<STATE_DATA>" +
  "<UNIT>" +
  "<STATE>Wisconsin</STATE>" +
  "<GDP>232,300,000,000</GDP>" +
  "<POPULATION>5,800,000</POPULATION>" +
  "<CODE>WI</CODE>" +
  "</UNIT>" +
  "<UNIT>" +
  "<STATE>Alabama</STATE>" +
  "<GDP>165,800,000,000</GDP>" +
  "<POPULATION>4,900,000</POPULATION>" +
  "<CODE>AL</CODE>" +
  "</UNIT>" +
  "<UNIT>" +
  "<STATE>California</STATE>" +
  /*California is missing the GDP node*/
  "<POPULATION>39,600,000</POPULATION>" +
  "<CODE>CA</CODE>" +
  "</UNIT>" +
  "<UNIT>" +
  "<STATE>Texas</STATE>" +
  "<GDP>1,600,000,000,000</GDP>" +
  "<POPULATION>28,300,000</POPULATION>" +
  "<CODE>TX</CODE>" +
  "</UNIT>" +
  "<UNIT>" +
  "<STATE>Michigan</STATE>" +
  "<GDP>382,000,000</GDP>" +
  "<POPULATION>10,000,000</POPULATION>" +
  "<CODE>MI</CODE>" +
  "</UNIT>" +
  "</STATE_DATA>";

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

<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="testResults()">submit</button>

<datalist id="myInput">
<option id="AL">Alabama</option>
<option id="CA">California</option>
<option id="MI">Michigan</option>
<option id="TX">Texas</option>
<option id="WI">Wisconsin</option>
</datalist>

<p>State node: <span id="stateNode"></span></p>
<p>GDP node: <span id="gdpNode"></span></p>
<p>Population node: <span id="populationNode"></span></p>
<p>Code node: <span id="codeNode"></span></p>

【问题讨论】：

这似乎可行，但它有点乱，可能需要清理，因此不能作为解决方案/答案发布，但我希望这有助于 [JsFiddle 演示](jsfiddle.net/New_To_JS/n5zvyqcL请注意HTML 的更改。我在span 中添加了class 标记以清除当前的textContent，并使用查询结果定位元素ID's
为什么不将其发布为答案？看起来是一个优雅的解决方案。
@NewToJS 你能解释一下这是做什么的吗？ forEach(v=>{v.innerHTML="";
因为我在结果span 标记中添加了class，所以我使用它来循环/迭代元素的类/组/集合以清除innerHTML/textContent。我添加的原因是，如果您更改选项并且缺少结果，它仍会在缺少的跨度中显示以前的内容。我正在使用 XML 标记名称来定位跨度。
v 用作结果集合中的当前/目标项，并作为参数提供给函数。就像使用onClick="MyFunction(this)" 传递用于触发函数的元素一样，但在forEach 中它将使用v 作为当前目标。如果添加console.log(v); 并打开浏览器控制台，您将看到v 包含的内容。

标签： javascript xml

【解决方案1】：

正如您所发现的，使用节点位置通常不是一种可靠的方法。根据您的 XML 结构的大小，我建议使用 Unit 节点中的 sub-querySelector：

您已经有了 UNIT 节点 (const unit = foundState.parentElement;)，所以只需像这样设置：

   var ustate = unit.querySelector('STATE') ? unit.querySelector('STATE').textContent: "Not Found";
   var ugdp = unit.querySelector('GDP') ? unit.querySelector('GDP').textContent: "Not Found";
...

然后更新您的 HTML：

  document.getElementById("stateNode").innerHTML =    ustate ;
  document.getElementById("gdpNode").innerHTML = ugdp ;

【讨论】：

谢谢@BenD。您提到“取决于 XML 结构的大小”。这不是大型 XML 文档的有效解决方案吗？