First, introduce the simple theory :
about XML, We can understand that it is a tree structure , It contains roots , Elements , attribute , Text and other contents . Different browsers have their own parsers , hold XML Read in memory , And convert it to be JavaScript Access to the XML DOM object .
Microsoft XML Parsers are different from those in other browsers . Microsoft's parser supports XML Document and XML character string ( Text ) Loading , Other browsers use separate parsers . however , All parsers contain traversal XML Trees 、 visit 、 Functions for inserting and deleting nodes .
If you are using a local file or network file and the file is on this server , So for IE And other browsers can pass load(uRl),loadXML(strXML) To create Xdom object . But for text , except IE You need a separate parser to handle .
The following functions are used to create according to different browsers Xdom object :
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 character string , Other browsers use DOMParser object parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml"); }else{ alert('Your browser cannot handle this script'); } // Turn off asynchronous loading , This ensures that before the document is fully loaded , The parser does not continue to execute the script xmlDoc.async=false; createTable(xmlDoc);}
There is specific parsing in the method , I won't be wordy anymore , For the content of parsing , It 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( element )</price></goods><goods id=\"2\"><name> Lenovo laptop </name><price>3206( element )</price></goods></goodss>";
Then define a goods.xml file :
<?xml version="1.0" encoding="UTF-8"?><goodss> <goods id="1"> <name> Digital camera </name> <price>3206( element )</price> </goods> <goods id="2"> <name> Lenovo laptop </name> <price>3206( element )</price> </goods></goodss>
Choose text or string by canceling and commenting .
This method can be general , Now let's analyze this Xdom object :
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 />"); } } }
Let's analyze the functions and attributes used :
Some typical DOM attribute
x.nodeName - x The name of
x.nodeValue - x Value
x.parentNode - x Parent node
x.childNodes - x Child nodes of
x.attributes - x Property node of
x.firstChild - x The first child node of , Equate to childNodes[0]
x.lastChild - x The last child of
x.data - x The content of , equivalent nodeValue
x.length - x The length of
x.nodeType - x The type of :1, Elements ,2, attribute ,3, Text ,4, notes ,5, file
In the list above ,x Is a node object
XML DOM Method
x.getElementsByTagName(name) - Gets all elements with the specified tag name , It's an array
x.getAttribute(name) - Returns the value of the property
Be careful
For security reasons , Modern browsers don't allow cross domain access . It means , The web page and what it's trying to load XML file , All must be on the same server . otherwise ,xmlDoc.load() There will be mistakes "Access is denied".
Add a button to the page to call the function :
<input type="button" name="bxml" value="Read" onclick="loadXMLDoc()" />
The page will output XMl Attributes of inner nodes and contents of child nodes . For general applications , I think the above content is enough . I will add some other operations later .
I recommend you to read more about “ js xml ActiveXObject ie firefox XMLDOM ” The article