不同浏览器对XML的解析是不同的

很多朋友在写前端代码时，都会遇到一个让人头疼的兼容性问题：同样一段解析XML的Ja vaScript代码，在火狐（Firefox）里运行得稳稳当当，可一放到谷歌（Chrome）或者IE里，直接就罢工了。这其实是因为不同浏览器对XML DOM的解析标准存在细微差异，尤其是localName、childElementCount这些属性，在老旧浏览器中并不被支持。那么，该怎样写一段通用的代码，让它能跨浏览器正确解析XML呢？

我们先来看一个典型的“问题代码” —— 它使用了较新的DOM属性，在火狐下没问题，但在Chrome和IE下就会报错：

$("#result").append(xmlDoc.firstChild.localName + "
");
for ( var i = 0; i < xmlDoc.documentElement.childElementCount; i++) {
    $("#result").append(
        xmlDoc.documentElement.children[i].localName + "
");
}

这段代码直观简洁，但localName和childElementCount在IE9以下版本中根本不存在，children属性在部分浏览器中也可能返回undefined。解决思路很简单：用更基础、兼容性更好的DOM方法代替它们，比如nodeName、childNodes和hasChildNodes。但更省心的做法是采用一套经过验证的跨浏览器加载与解析方案。

下面是一份兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器的完整示例。假设我们有一个XML文件（1.xml），内容如下：

    
        
        http://dotnet.aspx.cc/
    
    
        
        http://example.com/
    

注意，这里我们故意将第二个链接改成了通用示例地址，避免在示例中间出现个人推广信息。原始数据中如需保留具体内容，只需替换回即可。

现在，我们来看看完整的HTML页面代码。它通过XMLHttpRequest异步加载XML文件，然后解析并动态生成表格：

    

        

            
姓名
            
网址
        
    

这段代码的核心在于：

• 使用getElementsByTagName获取节点列表，这是最古老也是兼容性最好的方法。
• 通过childNodes[0].nodeValue获取文本内容，而不是依赖textContent或innerText。
• 用document.createElement和appendChild动态构建表格，避免使用innerHTML可能带来的脚本注入风险。

实际上，你只需要把这段代码复制到你的页面中，并确保1.xml文件路径正确，就能在所有主流浏览器中正常解析并显示数据。如果仍然遇到问题，请检查XML文件的格式是否严格遵循XML规范（比如标签必须闭合、属性值必须加引号等），因为浏览器的解析器对格式错误非常敏感。

最后补充一点：如果XML文件来自不同的域名，你还需要处理跨域问题（CORS或JSONP）。不过在我们的本地示例中，同源请求是没有任何障碍的。希望这个实战方案能帮你一次性解决XML跨浏览器解析的烦恼。