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.
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.
Why do you need HTML DOM
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.
In the below-given example, we have used the getElementById() method for finding the HTML DOM having the id “p1”:
<h2>This is linuxhint.com</h2>
<p id="p1">Find and Get HTML DOM elements by Id</p>
const element = document.getElementById("p1");
"The text of the first paragraph is: " + element.innerHTML;
Execute the above-given program in your favorite code editor or any online coding sandbox; however, we will utilize the JSBin for this purpose:
Example 2: HTML DOM Elements Representation
The following example illustrates the representation of HTML elements in DOM (Document Object Model):
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.