XML
DOM
XML is based on the Document Object Model (DOM), a DOM document that is a set of nodes or blocks of information organized at a hierarchy where developers can look for specific information in the navigation tree.
The DoM (Document Object Model Document Object Model) defines the standard way to access and manipulate documents.
XML DOM
XML Document Object Model defines the standard way to access and manipulate XML documents.
XML DOM views XML documents as a tree structure.
All elements can be accessed through the DOM tree. Y
ou can modify or delete their contents and create new elements. E
lements, their text, and their properties, are considered nodes.
You
can learn more about XML
DOM in our XML DOM tutorial.
HTML DOM
HTML DOM defines the standard way to access and manipulate HTML documents.
All HTML elements can be accessed through HTML DOM.
In
our HTML DOM
tutorial, you can learn more about HTML DOM.
Load an XML file - cross-browser instance
The following example parses the XML
document ("note.xml")
into the XML DOM object and extracts some information through JavaScript:
<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, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
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>
Important notes!
To extract the text "Tove" from the .xml elements of the XML file above ("note.xml"), the syntax is:
getElementsByTagName("to")[0].childNodes[0].nodeValue
Note that even if the XML file contains only one element, you must still specify an array index.
This is because the getElementsByTagName() method returns an array.
Load an XML string - cross-browser instance
The following example parses the XML string into the XML DOM object and extracts some information through JavaScript:
<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>
In the next section, you'll learn how to display XML data on HTML pages.