如何用JavaScript获取XML中Image节点属性？报错排查与解决

嗨，我看你在提取XML里的ThumbUrl属性时遇到报错了，咱们来拆解下问题，再给你靠谱的解决办法～

首先先明确你的XML结构：

<Vehicle id="4120505"> 
  <DealerName>Unitrans Volkswagen Mokopane</DealerName> 
  <Images> 
    <Image Id="6060247" ThumbUrl="http://image.blob.ix.co.za/20x90.jpg"/> 
  </Images> 
</Vehicle>

你原来的代码之所以报错，核心问题是**childNodes会把XML里的空白（换行、空格）解析成文本节点**，这些文本节点不属于元素节点，自然没有getAttribute方法，调用就会触发错误。

下面给你两种可行的解决方式：

方法一：直接定位到Image元素（最简洁） #

不用绕弯子遍历Images的子节点，直接用getElementsByTagName找到所有<Image>节点，一步到位：

// 直接获取所有Image元素节点
var imageNodes = xmlDoc.getElementsByTagName("Image");
for (var i = 0; i < imageNodes.length; i++) {
  console.log("ThumbUrl的值是：" + imageNodes[i].getAttribute('ThumbUrl'));
}

方法二：过滤childNodes中的非元素节点 #

如果你一定要通过Images的子节点来遍历，记得先判断节点类型，只处理元素节点（元素节点的nodeType等于1）：

var imageGroups = xmlDoc.getElementsByTagName("Images");
for (var i = 0; i < imageGroups.length; i++) {
  var childNodes = imageGroups[i].childNodes;
  for(var j = 0; j < childNodes.length; j++) {
    var node = childNodes[j];
    // 跳过空白文本节点，只处理元素节点
    if (node.nodeType === 1) {
      console.log("ThumbUrl的值是：" + node.getAttribute('ThumbUrl'));
    }
  }
}

两种方法都能顺利拿到你要的属性，第一种更直接推荐哦～

内容的提问来源于stack exchange，提问作者Takunda Geraldino Chibanda