What is DOM in HTML - HTML Tutorial

The Document Object Model (DOM) is the data representation of the objects that include the structure and content of a document on the web.
It introduces the DOM, look at how the DOM denotes an HTML document in memory and how to use APIs to create web content and applications.

What is the DOM ?

The Document Object Model (DOM) is a programming interface for web documents.
It represents the page so that programs can change the document structure, style, and content.
The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
A web page is a document that can be either shown in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated.
As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

DOM in HTML Javascript

Why DOM is important ?

The DOM is not a programming language, but without it, the JavaScript language wouldn’t be able to access any of the web pages elements in HTML documents, XML documents or their component parts .
One important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.
With DOM, JavaScript gets all the power it needs to create dynamic HTML such as changing the HTML elements, attributes, CSS styles, elements and events in the page. We can say that:

API = DOM + JavaScript

Types of DOM

The W3C DOM standard is separated into 3 different parts:

Core DOM — standard model for all document types(All DOM implementations must support the interfaces listed as “fundamental” in the Core specification.)
XML DOM — standard model for XML documents (As the name suggests, all XML elements can be accessed through the XML DOM.)
HTML DOM — standard model for HTML documents (The HTML DOM is a standard for how to get, change, add, or delete HTML elements.)

Commonly used Interfaces

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.scrollTo()

Finding HTML Elements

When you want to access HTML elements with JavaScript, you have to find the elements first.

Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors
Finding HTML elements by HTML object collections

Finding HTML elements by id

The easiest way to find an HTML element in the DOM, is by using the element id.
This example finds the element with id="para"
If the element is found, the method will return the element as an object (in myElement).
If the element is not found, myElement will contain null.

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>JavaScript HTML DOM - Wikitechy</h2>
            <p id="para">Finding HTML Elements by Id</p>
            <p id="demo"></p>
            <script>
                            const element = document.getElementById("para");
                            document.getElementById("demo").innerHTML = "The text from the para paragraph is: " 
                            + element.innerHTML;
                           </script>        
    </body>
</html>

Output

JavaScript HTML DOM - Wikitechy
Finding HTML Elements by Id

The text from the para paragraph is: Finding HTML Elements by Id

Finding HTML Elements by Tag Name

This example finds all <p> elements:

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>JavaScript HTML DOM - Wikitechy</h2>
            <p>Finding HTML Elements by Tag Name</p>
            <p id="demo"></p>
            <script>
                           const element = document.getElementsByTagName("p");

                           document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;
                           </script>        
    </body>
</html>

Output

JavaScript HTML DOM - Wikitechy
Finding HTML Elements by Tag Name

The text in first paragraph (index 0) is: Finding HTML Elements by Tag Name

Finding HTML Elements by Class Name

To find all HTML elements with the same class name, use getElementsByClassName().
This example returns a list of all elements with class="para".

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>Finding HTML Elements by Class Name  - Wikitechy</h2>
           
            <p class="para">Hello World!</p>
            <p id="demo"></p>
            <script>
                           const a = document.getElementsByClassName("para");
                           document.getElementById("demo").innerHTML = 
                           'The first paragraph (index 0) with class="para" is: ' + a[0].innerHTML;

                           </script>        
    </body>
</html>

Output

Finding HTML Elements by Class Name - Wikitechy
Hello World!

The first paragraph (index 0) with class="para" is: Hello World!

Finding HTML Elements by CSS Selectors

To find all HTML elements that matches a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
This example returns a list of all <p> elements with class="para".

Sample Code

<!DOCTYPE html>
<html>
    <body>
            <h2>Finding HTML Elements by Query Selector - Wikitechy</h2>
           
            <p class="para">Hello World!</p>
            <p id="demo"></p>
            <script>
                           const x = document.querySelectorAll("p.para");
                           document.getElementById("demo").innerHTML = 
                           'The first paragraph (index 0) with class="para" is: ' + x[0].innerHTML;
                           </script>        
    </body>
</html>

Output

Finding HTML Elements by Query Selector - Wikitechy
Hello World!

The first paragraph (index 0) with class="para" is: Hello World!

Finding HTML Elements by HTML Object Collections

HTML object collections are also accessible:

document.anchors
document.forms
document.images
document.links
document.scripts

Sample Code - document.anchors

<!DOCTYPE html>
<html>
    <body>
            <h2>HTML Elements Using document.anchors</h2>
           
            <a name="html">HTML</a><br>
            <a name="css">CSS</a><br>
            <a name="php">PHP</a><br>
            <p id="demo"></p>
            <script>
                           document.getElementById("demo").innerHTML =
                           "Number of anchors are: " + document.anchors.length;
                           </script>        
    </body>
</html>

Output

HTML Elements Using document.anchors
HTML
CSS
PHP
Number of anchors are: 3

What is DOM in HTML - HTML Tutorial

Introduction to the DOM

What is the DOM ?

DOM in HTML Javascript

Why DOM is important ?

Types of DOM

Commonly used Interfaces

Finding HTML Elements

Finding HTML elements by id

Sample Code

Output

Finding HTML Elements by Tag Name

Sample Code

Output

Finding HTML Elements by Class Name

Sample Code

Output

Finding HTML Elements by CSS Selectors

Sample Code

Output

Finding HTML Elements by HTML Object Collections

Sample Code - document.anchors

Output

Related Searches to What is DOM in HTML

Wikitechy

Workshop

Join our Community

Other Languages