HTML DOM stands for the Document Object Model is a tree-like structure that offers dynamic interaction and manipulation of the content, structure, and style of an HTML document. It is an interface for web documents. Based on user activity The HTML DOM offers to create interactive web pages where elements can be added, removed, or modified.
Significance of HTML DOM
The HTML DOM defines the logical structure of the document and how a document is accessed and manipulated. The DOM is automatically created by the browser when the HTML document is parsed. It is the process of creating the DOM that involves converting the HTML document into a tree-like structure, which can be further manipulated with JavaScript. Additionally, The HTML DOM is widely used for various real-world applications like updating content dynamically, Form Validation, AJAX Requests, Event Handling, and Web Scraping.
HTML DOM Structure
The image below shows the tree-like structure of the Document Object Model. The below table shows the properties of the document object with their description.
Representation of DOMThe below table illustrates the various Objects of the DOM hierarchy with their description.
|
| Window Object | It is an object of the browser which is at top of the hierarchy. |
| Document object | When an HTML document is loaded on the web browser into a window, it becomes a document object. |
| Form Object | The form object is defined as the form tags. |
| Link Object | The Link object is defined as the link tags. |
| Anchor Object | The anchor object is defined as the a tags with href attributes. |
| Form Control Elements | Form control elements such as text fields, buttons, radio buttons, checkboxes used when form is created which wrapped inside form tags |
Adding New Element to the DOM
We can add new element dynamically by creating a new element using createElement, and finally appending the new element to the DOM with methods like appendChild.
Example: In the example, we will see how to add new elements to the DOM.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML DOM</title>
</head>
<body>
<h1 id="GeeksforGeeks"
style="color: green;">
GeeksforGeeks
</h1>
<h3>
Adding new element to the DOM
</h3>
<button id="btn">
Click to Add Element
</button>
<script>
const btn =
document.getElementById("btn");
btn.addEventListener("click", function () {
// Create a new paragraph element
const newPara =
document.createElement("p");
newPara.textContent =
"This paragraph element was added dynamically on click.";
// Append the new element to the body
document.body
.appendChild(newPara);
});
</script>
</body>
</html>
Output:
Techniques for Finding DOM Elements
The below table illustrates the various techniques for Finding DOM Elements with their description and syntax.
|
| id | It returns the HTML element with the specified id value. | document.getElementById("mybox") |
| tag name | It returns all the HTML element with the specified name value. | document.getElementsByTagName("a") |
| class name | It returns the element with the specified id value. | document.getElementsByClassName("box") |
| CSS selectors | Used to find any element(s) for styling purpose. | document.querySelectorAll(selectors) |
Example: The example illustrates how to find the element and make operations using CSS Selectors property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML DOM</title>
</head>
<body>
<h1 id="mybox">GeeksforGeeks</h1>
<h3>
HTML DOM using
property querySelectorAll
</h3>
<script>
const element =
document.querySelectorAll("h1")[0]
element.style.color = "green";
</script>
</body>
</html>
Output:
Event Listeners
Event Listeners offers the addEventListener() method which is an inbuilt function in JavaScript responsible for handling events like clicks or form submissions. There are various event defined including Click Event Listener, Mouseover Event Listener, Mouseout Event Listener, Keydown Event Listener, Keyup Event Listener etc.
Accessing the DOM
The below table illustrates the various techniques for Accessing DOM Elements with their description.
|
| document.anchors | The document.anchors property returns a collection of all anchor elements (<a>) in the current HTML document. |
| document.forms | The document.forms property returns a collection of all form elements (<form>) in the current HTML document. |
| document.images | The document.images property returns a collection of all image elements (<img>) in the current HTML document. |
| document.links | The document.links property returns a collection of all links elements (<a>) with a valid href attribute in the current HTML document. |
| document.scripts | The document.scripts property returns a collection of all anchor elements (<scripts>) in the current HTML document. |
Example: The example illustrates the properties for finding HTML elements by HTML Object Collection document.anchor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM anchors collection</title>
<style>
.gfg {
color: green;
}
</style>
</head>
<body>
<h1 class="gfg">
GeeksforGeeks
</h1>
<h3>DOM anchors Collection</h3>
<a>GeeksforGeeks</a><br>
<a>Placement</a><br>
<a>Courses</a>
<br><br>
<button onclick="afunGeeks()">
Submit
</button>
<p id="pid"></p>
<script>
function afunGeeks() {
let x = document.anchors.length;
document.getElementById("pid").innerHTML =
"Number of Anchors elements: " + x;
}
</script>
</body>
</html>
Output:
Similar Reads
What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to structure and design web pages. It defines how text, images, and multimedia content are displayed in a web browser.HTML uses tags and elements to organize content on a webpage.It was created by Tim Berners-Lee in 1990 for shari
4 min read
What are HTML Tags ?
HTML (HyperText Markup Language) is the standard markup language used to create the structure and layout of web pages. HTML documents consist of a series of elements, and these elements are defined using HTML tags. HTML tags are essential building blocks that define the structure and content of a we
2 min read
HTML DOM li Object
The DOM Li Object is used to represent the HTML <li> element. The li element is accessed by getElementById(). Properties: value: It has an attribute named value which is used to return the value of the value attribute of the <li> tag. Syntax: document.getElementById("ID"); Where “id†is
1 min read
What is grouping in HTML ?
Grouping plays a vital role in our web page because it helps the developer to target specific classes and id which makes it easier to position, style, or manipulate the web page with the help of HTML, CSS, or JavaScript. Grouping can be performed with the help of various tags such as <div>,
2 min read
What is LitHTML ?
What is lit-html?LitHTML, also known as lit-html, is a lightweight HTML template library designed to simplify the development of dynamic web components and applications. It provides a declarative templating syntax that enables developers to seamlessly integrate JavaScript expressions directly within
5 min read
HTML DOM write() Method
The write() method in HTML is used to write some content or JavaScript code in a Document. This method is mostly used for testing purposes. It is used to delete all the content from the HTML document and inserts the new content. It is also used to give additional text to an output that is opened by
2 min read
HTML bdo Tag
The <bdo> (Bidirectional Override) tag in HTML is used to override text directionality, explicitly setting text direction to left-to-right (LTR) or right-to-left (RTL).It can make text go from left to right or right to left.This is helpful for languages like Arabic or Hebrew.It ensures text di
3 min read
JavaScript HTML DOM
The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a pa
4 min read
HTML DOM Nav Object
The DOM nav object is used to represent the HTML <nav> element. The<nav> element is accessed by getElementById(). Syntax: document.getElementById("id") Where id is assigned to the <nav> tag. Note: The Nav Object is not supported by Internet Explorer 8 and earlier versions. Example
1 min read
HTML | DOM IFrame Object
The IFrame Object property in HTML DOM is used to create and access the <iframe> element within the object. An inline frame is used for embedding another document within the current HTML document. Syntax:It is used to access a <iframe> element.var x = document.getElementById("myframe");I
3 min read