JavaScript

HTML DOM (Document Object Model)

To make an HTML document more dynamic and interactive, JavaScript is required to access the document content and identify the user interacting with it. JavaScript accomplishes this through interacting with the browser with the help of the HTML DOM (Document Object Model), its properties, events, and methods.

This write-up will discuss HTML DOM, its significance, and its structure. We will also talk about the properties and methods of the Document Object Model and DOM levels.

HTML DOM

The HTML Document Object Model or HTML DOM is an XML and HTML programming interface. The Document Object Model creates a logical document structure and defines the method to access and modify them. Because HTML DOM does not identify any object relationships, it is termed as logical structure.

HTML DOM is also known for representing web pages in a hierarchical and organized manner so that the users and JavaScript programmers can easily navigate through the document. HTML DOM permits you to access and manipulate HTML elements, classes, tags, attributes, and IDs by utilizing the offered methods and commands.

Why do you need HTML DOM

JavaScript is utilized to add related functionality if you are using HTML to structure your web pages. When an HTML document gets loaded in the browser, JavaScript can not understand it directly. Therefore, a corresponding Document Object Model is created. The generated DOM represents the same HTML document differently with the help of the objects. After that, JavaScript can readily interpret the HTML DOM.

For instance, In an HTML document, JavaScript can not directly understand the tags (<p> paragraph <p>); however, it can understand the object “p” in the Document Object Model. With this capability, JavaScript can use several methods to access the added objects of HTML documents.

Structure of HTML DOM

HTML DOM or Document Object Model has a tree-like structure, where the tree defines the structure model of the document. In the HTML DOM structure model, “structural isomorphism” is an essential property that states that if you have used two DOM implementations for constructing a representation or model of the same HTML document, they will produce the same structural models be based on the same objects and their relationships.

Why do we call HTML DOM a Document Model

HTML objects are used for modeling documents. This model comprises the document structure, objects, and their behavior, such as the HTML tag elements having their attributes.

HTML DOM Properties

Now, let’s check out the document object’s properties that can retrieve and change the document object:

  • Window Object: You will always see the “Window Object” at the top of the DOM hierarchy.
  • Document Object: When you load an HTML document in a browser, it is converted into a document object.
  • Anchor Object: href tags are utilized for representing the Anchor Objects.
  • Form Object: form tags are utilized for representing the Form Objects.
  • Link Object: link tags are utilized for representing the Link Objects.
  • Form Control Elements: Forms can also have other control elements such as Buttons, Reset, radio buttons, Textarea, Checkboxes.

HTML Document Object Methods

Here is some useful HTML Document object methods which you can use according to your requirements:

  • getElementByClassName(): The getElementByClassName() method is utilized for retrieving elements having the specified class name.
  • getElementByTagName(): The getElementByTagName() method is utilized for retrieving elements with the added tag name.
  • getElementByName(): The getElementByName() method is utilized for retrieving elements having the specified name value.
  • getElementById(): The getElementById() method is utilized for retrieving elements having the specified id value.
  • write(): The write() method is utilized for writing the specified string in the document.

Example 1: Find and Get HTML element by Id in JavaScript

In the below-given example, we have used the getElementById() method for finding the HTML DOM having the id “p1”:

<!DOCTYPE html>
<html>

<body>
<h2>This is linuxhint.com</h2>
<p id="p1">Find and Get HTML DOM elements by Id</p>
<p>This is a JavaScript program that utilizes the "getElementsById" method</p>
<p id="p2"></p>

<script>
const element = document.getElementById("p1");
document.getElementById("p2").innerHTML =
"The text of the first paragraph is: " + element.innerHTML;
</script>

</body>
</html>

Execute the above-given program in your favorite code editor or any online coding sandbox; however, we will utilize the JSBin for this purpose:

Execution of the above-given JavaScript program will show the following output:

Example 2: HTML DOM Elements Representation

The following example illustrates the representation of HTML elements in DOM (Document Object Model):

<table>
<ROWS>
<tr>
<td>Bike</td>
<td>Airplane</td>
</tr>
<tr>
<td>Truck</td>
<td>Bus</td>
</tr>
</ROWS>
</table>

Here is the representation of the above-given elements in a tree-like structure:

HTML DOM Level

HTML DOM consists of four levels: Level 0, Level 1, Level 2, and Level 3.

DOM Level 0

This level offers a low-level interface set.

DOM Level 1

DOM Level 1 comprises HTML and CORE parts. HTML supplies high-level interfaces that can be utilized to represent HTML documents and the CORE part is used to represent the structured document.

DOM level 2

DOM level 2 is based on six specifications: RANGE, TRAVERSAL, STYLE, EVENTS, AND CORE2.

  • RANGE: It permits HTML programs for dynamically allocating a content range in the document.
  • TRAVERSAL: It permits HTML programs to traverse the document dynamically.
  • STYLE: It permits programs to retrieve and set the style sheets’ content.
  • EVENTS: When a user interacts with a web page, EVENTS are the scripts executed as a result of it.
  • VIEWS: It permits HTML programs to retrieve and set the document’s content.

DOM Level 3

DOM level 3 is based on five specifications: XPATH, EVENTS, VALIDATION, SAVE, LOAD, and CORE3.

  • XPATH: It is a path language utilized for accessing the tree structure of DOM.
  • EVENTS: It enhances the functionality of DOM Level 2 Events.
  • VALIDATION: It permits the HTML program to modify the structure and document’s content while ensuring that the provided document is valid.
  • SAVE and LOAD: The HTML program permits dynamically loading and saving the XML document content into a DOM document.
  • CORE3: It enhances the functionality of DOM Level 2 Core.

Conclusion

HTML DOM or the Document Object Model is crucial for developing interactive websites. It is a user interface that lets a programming language change the website’s style, structure, and content. HTML DOM also acts as an interface between HTML and JavaScript. This write-up discussed HTML DOM, its significance, and its structure. We have also talked about the properties and methods of Document Object Model and DOM levels.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.