Updated April 10, 2023
Introduction to XML DOM
The document object model is a language-independent cross-platform which converts any HTML or XML document into tree structures containing nodes. These nodes will have data stored in return. We can access these nodes to extract or change data. Nodes can be linked to event handlers which help in making the page dynamic. XML Document object model (DOM) defines a set of standards for data extraction and manipulation using hierarchies from XML documents.
DOM was first developed after W3C (World wide web consortium) recommendations in 2004. Later this is handled by WHATWG (Web hypertext application technology working group). Major web technology contributors like Google, Microsoft, apple came together to be part of this group to set global web standards to be followed word wide for easy and fast data transmission in the era of connectivity and diversity of technologies.
How XML DOM Works?
DOM divides any XML or HTML document into tree structure making any document very easy to access and manipulate. This can be well understood by demonstrating this concept with the help of an example.
XML Code:
<XML version=”1.0” ?>
<school>
<student category=”Mechanical”>
<Firstname> Meghna </Firstname>
<Lastname> Dwivedi </Lastname>
<PhoneNumber> 1234567891 </PhoneNumber>
</student>
<student category=”Chemical”>
<Firstname> Arya vansh </Firstname>
<Lastname> Dwivedi </Lastname>
<PhoneNumber> 1234567894 </PhoneNumber>
</student>
<student category=”Computer science”>
<Firstname> B K </Firstname>
<Lastname> Dwivedi </Lastname>
<PhoneNumber> 1234567897 </PhoneNumber>
</student>
</school>
Explanation
The code written above is the example of document implementing DOM in it. The structure above has a parent node called: “school”. It is called as “root” node as this is the main node which becomes the start node of a given tree. This school node has three child nodes “student” having their own characteristics which are stored in the form of data in these nodes. Characteristic nodes here are “firstname”, “lastname” and “phonenumber”. These nodes will be child nodes of the parent node called “student”. The last node of the tree is called as “leave” nodes. In this case, the leave nodes are “lastname”, “firstname and “phonenumber”. The actual data is finally stored in leave nodes. We have the “attribute” nodes “category” containing information about the subject stream of the student. This tree structure simplifies the data storage scheme and standardizes it as well. This is the reason it becomes faster to access the data.
Important features of XML DOM
- Any node can have only one parent node. There cannot be a two-parent node for a single node.
- A parent node can have more than one child nodes though.
- Child nodes can have their child nodes assigned in any numbers.
- Child nodes can have other types of nodes assigned to them called “attribute” nodes. These nodes are used to contain some extra characteristics of the node. This node is different than the child node.
- The nodes of the same level in a tree are called “sister” nodes.
- DOM identifies the structure of information stored in a hierarchy.
- DOM is used to establish a relationship between data stored in different nodes.
Examples
Below is the working code of XML DOM. We can copy this code in notepad and save it using “file.xml”. This can be run in the browser then to check the result. This code has an XML file that follows DOM scheme. We are using “id” as a start point. WE are passing the XML data structure in the script. Then we are using xml parser to extract the value/data from the XML structure using node.
IN this example the name, contact number and the passing year is stored as child node data under student node. “student” node is the child node for parent node called “studentdetails” Here the root node is “studentdetails” as this is the originating node for this tree structure. There are no characteristics assigned to the nodes. We are extracting data at the eb=nd by using tag anme and child node index. In the below example we are extracting the name of the student. DOMParser() is the function used to extract the XML code from the text string passed in the program. DOMParser() is the function defined with an efficiency to extract the XML type code using tags from the normal string passed.
XML Code:
<!DOCTYPE html>
<html>
<body>
<h1 align="center">This is to test how XML DOM works..</h1>
<p id="demo"></p>
<script>
var parser, xmlDoc;
var text = "<studentDetails><student>" +
"<name>Test student</name>" +
"<contact>9876543214</contact>" +
"<passingyear>2017</passingyear>" +
"</student></studentDetails>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Output:
Conclusion
XML DOM is one of the ways to extract data from XML Documents. DOM not only is a standardized way for XML documents but also used by developers for data extraction of HTML documents. This gives a lot of flexibility for data access and dynamic changes in the web pages. This was designed to keep the world standards in mind so that browsers operating in a different programming language can have a common structure to define data over the net. This makes data access symmetric across the globe irrespective of the browser installed in the local machine.
Recommended Articles
This is a guide to XML DOM. Here we discuss How XML DOM Works along with the Important features and examples. You may also have a look at the following articles to learn more –
