Detailed explanation of JS cross browser analysis of XML application process

First, introduce a simple theory:

For XML, we can understand that it is a tree structure, which contains roots, elements, attributes, text and so on. Each browser has its own parser that reads XML into memory and converts it into an XML DOM object that can be accessed by JavaScript.

Microsoft's XML parser is different from parsers in other browsers. Microsoft's parser supports loading XML files and XML strings (text), while other browsers use separate parsers. However, all parsers contain functions to traverse the XML tree, access, insert, and delete nodes.

If you are using a local file or a network file and the file is on this server, then IE and other browsers can create Xdom objects through load (uRl) and loadXML (strXML). However, for text, a separate parser is needed except IE.

The following functions are used to create Xdom objects based on different browsers:

function loadXMLDoc() { 
  var xmlDoc; 
  // code for IE 
  if (window.ActiveXObject){ 
   xmlDoc=new ActiveXObject("Microsoft.XMLDOM");// Create an empty Microsoft  XML  Document object  
   //xmlDoc.load(uRl); 
   //loadXML()  Method is used to load a string (text), and  load()  Used to load files  
   xmlDoc.loadXML(xmlstr); 
  } 
  // code for Mozilla, Firefox, Opera, etc. 
  else if(document.implementation&&document.implementation.createDocument){  
   xmlDoc=document.implementation.createDocument("","",null); 
   //xmlDoc.load(uRl); 
   //Internet Explorer  Use  loadXML()  Method to parse  XML  String, while other browsers use the  DOMParser  Object  
   parser=new DOMParser(); 
   xmlDoc=parser.parseFromString(txt,"text/xml"); 
  }else{ 
   alert('Your browser cannot handle this script'); 
  } 
  // Turn off asynchronous loading, which ensures that the parser does not continue to execute the script until the document is fully loaded  
  xmlDoc.async=false;  
  createTable(xmlDoc); 
} 

There are specific parsing in the method, so I won't talk about it anymore. The parsing content is divided into string and text.

First define a string:

var xmlstr=" < ?xml version=\"1.0\" encoding=\"UTF-8\"? > < goodss > < goods id=\"1\" > < name > Digital camera < /name > < price > 3206 (yuan) < /price > < /goods > < goods id=\"2\" > < name > Lenovo notebook computer < /name > < price > 3206 (yuan) < /price > < /goods > < /goodss > ";

Then define an goods. xml file:

The contents of the document are as follows:

<?xml version="1.0" encoding="UTF-8"?> 
<goodss> 
  <goods id="1"> 
    <name> Digital camera </name> 
    <price>3206( Yuan )</price> 
  </goods> 
  <goods id="2"> 
    <name> Lenovo notebook computer </name> 
    <price>3206( Yuan )</price> 
  </goods> 
</goodss> 

Choose whether it is text or string by canceling and commenting.

This method can be generic. Let's parse this Xdom object again:

function createTable(xmldoc){ 
  var goodss=xmldoc.getElementsByTagName("goods"); 
  for(var i=0;i<goodss.length;i++){ 
    var g=goodss[i]; 
    if (g.nodeType==1){ 
      var name=g.getElementsByTagName("name")[0].childNodes[0].nodeValue; 
      var price=g.getElementsByTagName("price")[0].childNodes[0].nodeValue; 
      var id=g.getAttribute("id"); 
      document.write(id + "-->" + name + "-->" + price); 
      document.write("<br />"); 
    } 
  }   
} 

For the functions and attributes used, let's parse 1:

/* 
1 Some typical ones  DOM  Attribute  
x.nodeName - x  Name of  
x.nodeValue - x  Value of  
x.parentNode - x  Parent node of  
x.childNodes - x  Child nodes of  
x.attributes - x  Attribute node of  
x.firstChild - x  The first part of 1 Child node, equivalent to childNodes[0] 
x.lastChild - x  The last of 1 Child node  
x.data - x  The content of, equivalent to nodeValue 
x.length - x  The length of  
x.nodeType - x  Type of: 1, Element ,2, Attribute ,3, Text ,4, Notes ,5, Document  
 In the list above, x  Yes 1 Node object  
XML DOM  Method  
x.getElementsByTagName(name) -  Gets all elements with the specified label name and returns an array  
x.getAttribute(name) -  Returns the value of a property  
*/ 
/* For security reasons, modern browsers do not allow cross-domain access.  
 This means that the web page and the  XML  Files must all be on the same server.  
 Otherwise, xmlDoc.load()  Errors will be generated  "Access is denied" .  
*/ 

Add 1 button to the early page to call the function:

< input type="button" name="bxml" value="Read" onclick="loadXMLDoc()" / >

The page will output the attributes of nodes and the contents of child nodes in XMl. For 1 general application, I think the above content is enough. I will add one other operation later.