XML DOM


May 27, 2021 18:00 XML


Table of contents


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>

Try it out . . .


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>

Try it out . . .

In the next section, you'll learn how to display XML data on HTML pages.