JavaScript访问嵌套XML：获取Detail的Id与Color的colorName

需要在JavaScript中访问嵌套XML里<Detail>元素的Id属性，以及<Color>元素的colorName属性。已知通过x[i].getAttribute('No')可以返回0002，想获取Id="6"和colorName="orange"，尝试x[i].getElementsByTagName("Detail")[i].getAttribute('Id')未成功。

示例XML #

<xml>
  <Items>
    <Item No="0001">
      <Details>
        <Detail Id="3">
          <Colors>
            <Color colorName="green" />
            <Color colorName="yellow" />
          </Colors>
        </Detail>
        <Detail Id="4">
          <Colors>
            <Color colorName="red" />
            <Color colorName="blue" />
          </Colors>
        </Detail>
      </Details>
    </Item>
    <Item No="0002">
      <Details>
        <Detail Id="5">
          <Colors>
            <Color colorName="purple" />
            <Color colorName="pink" />
          </Colors>
        </Detail>
        <Detail Id="6">
          <Colors>
            <Color colorName="grey" />
            <Color colorName="orange" />
          </Colors>
        </Detail>
      </Details>
    </Item>
    <Item>
      <Details>
      </Details>
    </Item>
  </Items>
</xml>

现有可返回"0002"的代码 #

var x = xmlDoc.getElementsByTagName("Item");
Number = '0002';

for (i = 0; i < x.length; i++) {
  if (x[i].getAttribute('No') === Number) //desc
    ans = x[i].getAttribute('No') // returns 0002
}

解决方案 #

方法一：基于现有循环逻辑扩展 #

你之前的代码失败是因为共用了外层Item循环的索引i来访问Detail数组，这会导致索引不匹配（比如当i=0时，取Detail[0]是对的，但逻辑上不通用）。正确的做法是在找到目标Item后，单独遍历它的Detail和Color元素：

var x = xmlDoc.getElementsByTagName("Item");
var targetNo = '0002';

for (var i = 0; i < x.length; i++) {
  if (x[i].getAttribute('No') === targetNo) {
    // 获取当前Item下的所有Detail节点
    var details = x[i].getElementsByTagName("Detail");
    // 遍历Detail找Id=6的节点
    for (var j = 0; j < details.length; j++) {
      var currentId = details[j].getAttribute('Id');
      if (currentId === '6') {
        console.log('Detail Id:', currentId);
        // 获取该Detail下的所有Color节点
        var colors = details[j].getElementsByTagName("Color");
        // 遍历Color找colorName=orange的节点
        for (var k = 0; k < colors.length; k++) {
          var currentColor = colors[k].getAttribute('colorName');
          if (currentColor === 'orange') {
            console.log('Color colorName:', currentColor);
          }
        }
      }
    }
  }
}

方法二：使用XPath直接定位（更简洁） #

如果浏览器支持XPath，可以用更精准的路径直接定位目标节点，省去多层循环：

// 定位No=0002的Item下Id=6的Detail节点
var targetDetail = xmlDoc.evaluate(
  "//Item[@No='0002']//Detail[@Id='6']",
  xmlDoc,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
).singleNodeValue;

if (targetDetail) {
  console.log('Detail Id:', targetDetail.getAttribute('Id'));
  // 定位该Detail下colorName=orange的Color节点
  var targetColor = xmlDoc.evaluate(
    ".//Color[@colorName='orange']",
    targetDetail,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
  ).singleNodeValue;
  if (targetColor) {
    console.log('Color colorName:', targetColor.getAttribute('colorName'));
  }
}

内容的提问来源于stack exchange，提问作者Sarahrb