使用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）的两种方法。

<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中找到了跨浏览器兼容性的解决方案，并在JavaScript中解析了变量字符串

似乎XmlDocument几乎与IE6-IE8中使用DomParser或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适用于大多数现代浏览器。