Home>Network programming tutorial>XML tutorial

XML DOM

Author：Eve Cole Update Time：2025-01-03 19:48:01 
XML DOM
 The basis of XML is the Document Object Model (DOM). A DOM document is a set of nodes or information blocks organized hierarchically. Through this hierarchical structure, developers can find specific information in the navigation tree.
 DOM (Document Object Model) defines standard methods for accessing and manipulating documents.
 XML DOM
 XML DOM (XML Document Object Model) defines a standard method for accessing and manipulating XML documents.
 XML DOM views XML documents as a tree structure.
 All elements can be accessed through the DOM tree. Their contents can be modified or deleted, and new elements created. Elements, their text, and their attributes are all considered nodes.
 You can learn more about XML DOM in our XML DOM tutorial.
 HTML DOM
 The HTML DOM defines standard methods for accessing and manipulating HTML documents.
 All HTML elements can be accessed through the HTML DOM.
 You can learn more about the HTML DOM in our HTML DOM tutorial. .
 Load an XML file - cross-browser example
 The following example parses an XML document ("note.xml") into an XML DOM object and then extracts some information via JavaScript:
 Example
 <html><body><h1>W3Cschools Internal Note</h1><div><b>To:</b> <span id="to"></span><br /><b>From:< /b> <span id="from"></span><br /><b>Message:</b> <span id="message"></span></div><script>if (window .XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.open("GET","note.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXM L;document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;document.g etElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;document.getElemen tById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;</script></body></html>
 Try it »
 Important note!
 To extract the text "Tove" from the <to> element of the above XML file ("note.xml"), the syntax is:
 getElementsByTagName("to")[0].childNodes[0].nodeValue
 Note that even if the XML file contains only one <to> element, you must still specify array index [0]. This is because the getElementsByTagName() method returns an array.
 Load an XML string - cross-browser example
 The following example parses an XML string into an XML DOM object and then extracts some information via JavaScript:
 Example
 <html><body><h1>W3Cschools Internal Note</h1><div><b>To:</b> <span id="to"></span><br /><b>From:< /b> <span id="from"></span><br /><b>Message:</b> <span id="message"></span></div><script>txt="<note>";txt=txt+"<to>Tove</to>";txt=txt+"<from>Jani</from >";txt=txt+"<heading>Reminder</heading>";txt=txt+"<body>Don't forget me this weekend!</body>";txt=txt+"</note>";if (window.DOMParser){parser=new DOMParser();xmlDoc=parser.parseFromString(txt,"text/xml");}else / /Internet Explorer{xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async=false;xmlDoc.loadXML(txt);}document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0] .nodeValue;document.getElementById("from" ).innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0] .nodeValue;</script></body></html>
 Try it »

In the next section, you'll learn how to display XML data in an HTML page.

Related Articles