Read and parse XML File using HTML5 FIle API

Question

I'm trying to read a user XML file (a sitemap.xml file) like this:

<?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>

How can I read the XML parsed content in a structured/programatic way?

Tried 2 ways using DomParser (XmlDocument) and DOM interpreter (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>

What is the best, secure and cross-browser way to do this, and traverse the XML document to query attributes and content?

EDIT: Searching for more info i've found solution for cross-browser compatibility in https://www.w3schools.com/Xml/xml_parser.asp and XML parsing of a variable string in JavaScript

It seems that XmlDocument is compatible with almost any well-known browser using DomParser ,or ActiveXObject("Microsoft.XMLDOM") in IE6-IE8 .

For XML browsing i've found tipically using xmlElem=xmldoc.getElementById() for selecting tags , xmlElem.childNodes to get internal nodes, and xmlElem.getAttribute() to read tag attributes. It's that ok?

score 0 · Answer 1 · answered Apr 06 '17 at 22:21

I've encountered the most compatible and cross-browser method of parsing XML data is using the following code to get an object that parse xml data (The second part with XMLDOM is for IE5-8 browsers):

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); 
 }

Then i've tested the following methods to get relevant information of xml data:

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);
}

These attributes for both objects are working in the same way. Only .text and .textContent have different behavior (.text is undefined for DOMParser and .textContent is undefined for XMLDOM)

Unless you need compatibility with old IE browsers, DOMParser is working for the majority of modern browsers.

Read and parse XML File using HTML5 FIle API

1 Answers1