EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials XML Tutorial XML DOM
 

XML DOM

Updated April 10, 2023

XML DOM

 

 

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.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

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

  1. Any node can have only one parent node. There cannot be a two-parent node for a single node.
  2. A parent node can have more than one child nodes though.
  3. Child nodes can have their child nodes assigned in any numbers.
  4. 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.
  5. The nodes of the same level in a tree are called “sister” nodes.
  6. DOM identifies the structure of information stored in a hierarchy.
  7. 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: 

XML DOM 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 –

  1. What is XML?
  2. XML Commands
  3. XML Features

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA Login

Forgot Password?

🚀 Limited Time Offer! - 🎁 ENROLL NOW