DOM (Document Object Model) - GeeksforGeeks

13 Dec, 2021
In this article, we will discuss Document Object Model(DOM) along with its properties and methods used to manipulate Document, & understand their implementation through the examples.
The Document Object Model (DOM) is a programming interface for HTML and XML(Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
Note: It is called a Logical structure because DOM doesn’t specify any relationship between objects. 
DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or Elements using commands or methods provided by the Document object.
Why DOM is required?
HTML is used to structure the web pages and Javascript is used to add behavior to our web pages. When an HTML file is loaded into the browser, the javascript can not understand the HTML document directly. So, a corresponding document is created(DOM). DOM is basically the representation of the same HTML document but in a different format with the use of objects. Javascript interprets DOM easily i.e javascript can not understand the tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM. Now, Javascript can access each of the objects (h1, p, etc) by using different functions.
Structure of DOM: DOM can be thought of as a Tree or Forest(more than one tree). The term structure model is sometimes used to describe the tree-like representation of a document. One important property of DOM structure models is structural isomorphism: if any two DOM implementations are used to create a representation of the same document, they will create the same structure model, with precisely the same objects and relationships.
Why called an Object Model?Documents are modeled using objects, and the model includes not only the structure of a document but also the behavior of a document and the objects of which it is composed of like tag elements with attributes in HTML.
Properties of DOM: Let’s see the properties of the document object that can be accessed and modified by the document object.
Representation of the DOM
Window Object: Window Object is always at top of the hierarchy.
Document object: When an HTML document is loaded into a window, it becomes a document object.
Form Object: It is represented by form tags.
Link Object: It is represented by link tags.
Anchor Object: It is represented by a href tags.
Form Control Elements:: Form can have many control elements such as text fields, buttons, radio buttons, and checkboxes, etc.
Methods of Document Object:
write(“string”): Writes the given string on the document.
getElementById(): returns the element having the given id value.
getElementsByName(): returns all the elements having the given name value.
getElementsByTagName(): returns all the elements having the given tag name.
getElementsByClassName(): returns all the elements having the given class name.
Example: In this example, We use HTML element id to find the DOM HTML element.
HTML
<!DOCTYPE html><html> <body>    <h2>GeeksforGeeks</h2>       <!-- Finding the HTML Elements by their Id in DOM -->    <p id="intro">A Computer Science portal for geeks.</p>      <p>This example illustrates the <b>getElementsById</b> method.</p>     <p id="demo"></p>     <script>    const element = document.getElementById("intro");    document.getElementById("demo").innerHTML =      "GeeksforGeeks introduction is: " + element.innerHTML;    </script></body> </html>
Output:
Getting the HTML element by getElementById() Method
Example: This example describes the representation of the HTML elements in the tree structure.
html
<table>  <ROWS>    <tr>      <td>Car</td>      <td>Scooter</td>    </tr>    <tr>      <td>MotorBike</td>      <td>Bus</td>    </tr>  </ROWS></table>
HTML elements in tree-like structure
What DOM is not? 
The Document Object Model is not a binary description where it does not define any binary source code in its interfaces.
The Document Object Model is not used to describe objects in XML or HTML whereas the DOM describes XML and HTML documents as objects.
The Document Object Model is not represented by a set of data structures; it is an interface that specifies object representation.
The Document Object Model does not show the criticality of objects in documents i.e it doesn’t have information about which object in the document is appropriate to the context and which is not.
Levels of DOM: 
Level 0: Provides a low-level set of interfaces.
Level 1: DOM level 1 can be described in two parts: CORE and HTML.CORE provides low-level interfaces that can be used to represent any structured document.HTML provides high-level interfaces that can be used to represent HTML documents.
CORE provides low-level interfaces that can be used to represent any structured document.
HTML provides high-level interfaces that can be used to represent HTML documents.
Level 2: consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL, and RANGE.CORE2: extends the functionality of CORE specified by DOM level 1.VIEWS: views allows programs to dynamically access and manipulate the content of the document.EVENTS: Events are scripts that are either executed by the browser when the user reacts to the web page.STYLE: allows programs to dynamically access and manipulate the content of style sheets.TRAVERSAL: This allows programs to dynamically traverse the document.RANGE: This allows programs to dynamically identify a range of content in the document.
CORE2: extends the functionality of CORE specified by DOM level 1.
VIEWS: views allows programs to dynamically access and manipulate the content of the document.
EVENTS: Events are scripts that are either executed by the browser when the user reacts to the web page.
STYLE: allows programs to dynamically access and manipulate the content of style sheets.
TRAVERSAL: This allows programs to dynamically traverse the document.
RANGE: This allows programs to dynamically identify a range of content in the document.
Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH.CORE3: extends the functionality of CORE specified by DOM level 2.LOAD and SAVE: This allows the program to dynamically load the content of the XML document into the DOM document and save the DOM Document into an XML document by serialization.VALIDATION: This allows the program to dynamically update the content and structure of the document while ensuring the document remains valid.EVENTS: extends the functionality of Events specified by DOM Level 2.XPATH: XPATH is a path language that can be used to access the DOM tree.
CORE3: extends the functionality of CORE specified by DOM level 2.
LOAD and SAVE: This allows the program to dynamically load the content of the XML document into the DOM document and save the DOM Document into an XML document by serialization.
VALIDATION: This allows the program to dynamically update the content and structure of the document while ensuring the document remains valid.
EVENTS: extends the functionality of Events specified by DOM Level 2.
XPATH: XPATH is a path language that can be used to access the DOM tree.
Example: This example illustrates the dom-manipulation using getElementById() Method.
HTML
<!DOCTYPE html><html> <head>    <title>DOM manipulation</title></head> <body>    <label>Enter Value 1: </label>    <input type="text" id="val1" />    <br />    <br />    <label>Enter Value 2: </label>    <input type=".text" id="val2" />    <br />    <button onclick="getAdd()">Click To Add</button>    <p id="result"></p>          <script type="text/javascript">    function getAdd() {                 // Fetch the value of input with id val1        const num1 = Number(document.getElementById("val1").value);                 // Fetch the value of input with id val2        const num2 = Number(document.getElementById("val2").value);        const add = num1 + num2;        console.log(add);                 // Displays the result in paragraph using dom        document.getElementById("result").innerHTML = "Addition : " + add;                 // Changes the color of paragraph tag with red        document.getElementById("result").style.color = "red";    }    </script></body> </html>
Output:
Manipulating the Document objects using getElementById() Method
References: https://www.w3.org/TR/DOM-Level-3-Core/introduction.html
HTML is the foundation of web pages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AakashSingh_17
abhishek0719kadiyan
shubhamyadav4
ishani1124
bhaskargeeksforgeeks
HTML-DOM
JavaScript-Misc
HTML
JavaScript
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
File uploading in React.js