How are DOM utilized in JavaScript ?
Last Updated :
08 Dec, 2022
What is DOM
The document object Model (DOM) represents the full HTML document. When an HTML document is loaded within the browser, it becomes a document object. The root element represents the HTML document, its properties, and its methods. With the assistance of a document object, we will add dynamic content to our web page.
In another word, the way a document's content is accessed and modified is the Document Object Model or DOM. The objects are organized in a hierarchy. Web document objects are applied in this hierarchical data structure.
- Window object: It is at the top of the hierarchy. It's the utmost element of the object hierarchy.
- Document Object: Every HTML document becomes a Document object when it is loaded in windows. Contents of the page reside in the documents.
- Form object: The shape object enclosed within the <form>...</form> tags
- Form control elements: All the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes, are contained in the shape object.
DOM and JavaScript
The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of websites, HTML documents, SVG documents, and their parts. The document as an entire, the head, tables within the document, table headers, text within the table cells, and every other element in a document is part of the document object model for that document. They will all be accessed and manipulated using the DOM and a scripting language like JavaScript.
Using DOM, JavaScript can perform multiple tasks. It can create new elements and attributes, change the prevailing elements and attributes and even remove existing elements and attributes. JavaScript also can react to existing events and create new events on the page.
Example 1: The getElementById() using id is used to access elements and attributes. The innerHTML is used to access the content of an element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM by javascript</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h1 id="one">using Javascript</h1>
<p>This is the welcome message.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
console.log("The first heading is " + text);
</script>
</body>
</html>
Output:
Example 2: The getElementsByTagName() method will return an array of all the items with the same tag name. Elements and attributes are accessed using the tag name.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM using javascript</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h1>Welcome</h1>
<p>Hi GeeksforGeeks Welcomes you</p>
<h2>GFG</h2>
<p id="second">A computer science portal</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
console.log("Content in the second paragraph is "
+ paragraphs[1].innerHTML);
document.getElementById("second").innerHTML =
"The original message is changed.";
</script>
</body>
</html>
Output:
Similar Reads
How to Add JavaScript in HTML Document? To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev
3 min read
How to select DOM Elements in JavaScript ? Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript. It allows developers to interact with and manipulate elements on a webpage dynamically. Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or mo
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
JavaScript - How to Manipulate DOM Elements? The DOM stands for the Document Object Model (DOM), which allows us to interact with the document and change its structure, style, and content. We can use the DOM to change the content and style of an HTML element by changing its properties. In this article, we will discuss how to manipulate the DOM
6 min read
How to get/change the HTML with DOM element in JavaScript ? In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an
3 min read