Question

<?xml version="1.0" encoding="utf-8"?>
<section food="Fruit">
  <desc>Fruits of the World</desc>
  <fruit>
    <name>grapes</name>
    <desc>grow on vines</desc>
    <fruit>
      <name>seeded</name>
      <desc>seeded grapes</desc>
    </fruit>
    <fruit>
      <name>seedless</name>
      <desc>no seeds</desc>
      <fruit>
        <name>seedless Concord blue</name>
        <desc>deep blue without seeds</desc>
      </fruit>
      <fruit>
        <name>seedless Concord red</name>
        <desc>rose colored without seeds</desc>            
      </fruit>
    </fruit>
  </fruit>
</section>

我正在尝试使用相当复杂的嵌套来解析XML文件（使用JavaScript）。提供的样本是我所指的片段。基本问题是多个级别的标签具有相同的名称，例如样品中的“水果”。我需要能够提取特定于嵌套级别的信息，而不仅仅是getElementsByTagNames("fruit")。换句话说，参考上面的示例，标签名称“fruit”嵌套3深 - 我的目标是提取，例如，仅提取第二级“水果”信息。

我怎样才能做到最好？我想我需要引用节点之间的父/子关系，但我不确定如何继续。

提前致谢。

Answer 1

您可以使用XPath，它允许您使用要使用的元素的完整路径或部分路径来选择元素。例如：

/section/fruit/fruit/fruit[1]/name

将返回在该级别找到的两个fruit节点中的第一个节点的名称（'无核Concord blue'）。使用fruit[2]，您将找到另一个节点。

您可以检索任何节点：

/section/fruit/fruit[2]/desc

返回'无种子'，

/section/@food

返回'Fruit'（food中section属性的内容。）

您可以使用document.evaluate()评估XPath表达式：

var fruitName = document.evaluate("/section/fruit/fruit/fruit/name[1]", document, null, XPathResult.ANY_TYPE, null);

有很多关于XPath的教程，您可以在MDN或W3C

的文档中了解如何运行和配置DOM evaluate方法

Answer 2

如果您定位现代浏览器，则可以使用带有querySelector的CSS样式选择器（以获取第一个匹配元素）或querySelectorAll（以获取所有这些）。要仅获得第二级<fruit>（s），请使用选择器section > fruit > fruit：

var first2ndLevelFruit = document.querySelector("section > fruit > fruit")
console.log( first2ndLevelFruit.querySelector("desc").textContent );
// => seeded grapes

var all2ndLevelFruits = document.querySelectorAll("section > fruit > fruit");
Array.prototype.forEach.call( all2ndLevelFruits, function(fruit) {
  console.log( fruit.querySelector("desc").textContent );
} );
// => seeded grapes
//    no seeds

对于旧版浏览器，@ helderdarocha对XPath的建议非常好。

当标记名称在多个级别相同时，使用JavaScript解析XML

2 个答案: