Home >>XML Tutorial >XML DOM
XML DOM
XML DOM
What is XML DOM
DOM stands for the acronym Document Object Model. This lays out a standard method of viewing and handling information. The Document Object Model (DOM) is an Interface for HTML and XML applications in programming. It defines the logical structure of documents, and how to access and manipulate a document.
One significant aim for the Document Object Model as a W3C specification is to include a common programming interface which can be used in a broad range of environments and applications. Any programming language can use the Document Object Model.
A DOM document is a collection of hierarchically organized nodes or pieces of information. This hierarchy allows developers to navigate through the tree in search of particular information. The DOM is said to be tree-based because it is built on a hierarchy of information.
XML DOM sets out a simple way of accessing and handling XML documents.
What does XML DOM
For an XML document the XML DOM allows a tree-structure view.
Many of the components can be reached via the DOM tree.
We may alter or remove their content, and generate new elements as well. The components, their content (text, attributes) are all referred to as nodes.
For example, consider this table, taken from an HTML document:
<TABLE>
<ROWS>
<TR>
<TD>AB</TD>
<TD>BC</TD>
</TR>
<TR>
<TD>CD</TD>
<TD>DE</TD>
</TR>
</ROWS>
</TABLE>
XML DOM Example : Load XML File
Let's take an example to illustrate how an XML document ("note.xml") is parsed into an entity that is XML DOM.
This example parses an XML document (note.xml) into an XML DOM object, and extracts JavaScript details from it.
Let's look at the XML file containing message.
note.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>php@phptpoint.com</to>
<from>Html@phptpoint.com</from>
<body>Hello XML DOM</body>
</note>
Let's see the HTML file that extracts the data of XML document using DOM.
xmldom.html
<!DOCTYPE html>
<html>
<body>
<h1>Important 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 Note
To: php@javatpoint.com
From: HTML@javatpoint.com
Message: Hello XML DOM
XML DOM Example : Load XML String
This illustration parses an XML string into an XM DOM object and then extracts a JavaScript from it.
Let's look at the HTML file which extracts XML string data using DOM.
xmldom.html
<!DOCTYPE html>
<html>
<body>
<h1>Important Note2</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>
txt1="<note>";
txt2="<to>Phptpoint</to>";
txt3="<from>Noida</from>";
txt4="<body>Hello!</body>";
txt5="</note>";
txt=txt1+txt2+txt3+txt4+txt5;
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>
Important Note2
To: Phptpoint
From: Noida
Message: Hello!