javascript - 使用 HTML5 FILE API 读取和解析 XML 文件

Question

我正在尝试读取用户 XML 文件(sitemap.xml 文件)，如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
  <loc>http://www.myhost.com/</loc>
  <lastmod>2016-09-08T13:50:33+00:00</lastmod>
</url>
</urlset>

如何以结构化/编程方式读取 XML 解析内容？

尝试了使用 DomParser (XmlDocument) 和 DOM 解释器 (HtmlElement) 的 2 种方法。

<input type="file" onchange="readfile(this)" >

<script>
    function readfile(fileinputobj){
        var reader = new FileReader();

        reader.onload = function(e) {
            alert(reader.result);

            //Using DOMParser to get XMLDocument
            var parser = new DOMParser(),
            xmlDoc = parser.parseFromString(reader.result, "text/xml");

            if (xmlDoc.documentElement){
                console.log(xmlDoc.documentElement);
                //xmlDoc.documentElement.nodeName == 'urlset'
            }

            //Using DOM interpreter to get HtmlDocument
            var doc=document.createElement("div");
            doc.innerHTML=reader.result;
            if (doc.querySelector('urlset')){
                console.log(doc.querySelector('urlset'));
                //doc.querySelector('urlset').tagName == 'urlset'
            }
    }

    reader.readAsText(fileinputobj.files[0]);   
}
</script>

最好的、安全的、跨浏览器的方法是什么？ 并遍历XML文档来查询属性和内容？

编辑: 搜索更多信息我找到了跨浏览器兼容性的解决方案 https://www.w3schools.com/Xml/xml_parser.asp和 XML parsing of a variable string in JavaScript

看来 XmlDocument 与几乎所有使用 DomParser 或 IE6-IE8 中的 ActiveXObject("Microsoft.XMLDOM") 的知名浏览器兼容。

对于 XML 浏览，我发现通常使用 xmlElem=xmldoc.getElementById() 来选择标签，xmlElem.childNodes 来获取内部节点，以及 xmlElem .getAttribute() 读取标签属性。这样可以吗？

Answer 1

我遇到过的最兼容且跨浏览器的解析XML数据的方法是使用以下代码来获取解析XML数据的对象(XMLDOM的第二部分适用于IE5-8浏览器):

var xmldata="<data name=\"test\">txt1 <item>txt2</item></data>";

var xmlDoc;
if (window.DOMParser  ) {
      // code for modern browsers
      parser = new DOMParser();
      xmlDoc = parser.parseFromString(xmldata,"text/xml");
} else {
      // code for old IE browsers
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = false;
      xmlDoc.loadXML(xmldata); 
 } 

然后我测试了以下方法来获取xml数据的相关信息:

var node=0;  //example node index
console.log(xmldata);
console.log("Tag:"+xmlDoc.childNodes[node].tagName);
console.log("Attribute: name="+xmlDoc.childNodes[node].getAttribute("name"));
console.log(xmlDoc.childNodes[node]);
console.log("Text Content:"+xmlDoc.childNodes[node].text); //only works with XMLDOM
console.log("Text Content:"+xmlDoc.childNodes[node].textContent); //only works with DomParser
console.log("Child nodes:"+xmlDoc.childNodes[node].childNodes.length);
for(var i=0;i<xmlDoc.childNodes[node].childNodes.length;i++){
   console.log("Child node "+i+":"+xmlDoc.childNodes[node].childNodes[i].tagName);
}

这两个对象的这些属性以相同的方式工作。只有 .text 和 .textContent 具有不同的行为(.text 对于 DOMParser 未定义，.textContent 对于 XMLDOM 未定义)

除非您需要与旧版 IE 浏览器兼容，否则 DOMParser 适用于大多数现代浏览器。