What are the main functions of HTML DOM ?

Last Updated : 10 Apr, 2023

DOM or Document Object Model is an API(Application Programming Interface) that represents the HTML document in the form of the Tree structure such that programs can access and change the style and structure of the HTML document. The DOM object is automatically created by the web browser itself upon opening an HTML web page.

The HTML DOM contains three parts:

Document: This is the HTML Document that we create
Object: All the Elements and Attributes present in the HTML document come under Objects (Ex: <h1> <p> <img> etc)
Model: The Tree structure of the elements is called a Model.

Structural Representation of HTML DOM:

HTML Code: Consider a simple HTML code as follows.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h2>Welcome To GFG</h2>
    
<p>Default code has been loaded into the Editor.</p>

</body>
</html>

The HTML DOM created upon opening this web page by the web browser is as follows:

Main Functions of HTML DOM

The functions of HTML DOM are as follows:

DOM API can be used to access and modify the data present in the HTML document using JavaScript language. We can manipulate the following using the DOM API: HTML elements, attributes, and data present between the tags and CSS Styles.
DOM enables the programmers to create web pages that use dynamic HTML i.e. Those websites that get updated without refreshing the website.
It also enables the programmers to develop web pages or websites that are user-customizable i.e. The user can himself/herself can edit the HTML elements on the fly. (For Ex: changing the color of the web page or the button)
It functions as a bridge that makes the webpage dynamic using the JavaScript language.
Hence to make the website more interactive and dynamic, DOM provides various methods to access the elements and attributes using JavaScript. Some of the methods available are as follows
- getElementById() : This method is used to access the element present in the html document using it's unique ID.
- innerHTML: This is used to change the content present between the elements.
- addEventListener(): This method is used to get hold of the event object if an event is triggered (like mouse clicked)
- appendChild(): This method is used to append an element in the document.

Let's see an example of HTML DOM: In the below HTML code , we get hold of the data given in input text area element using document.getElementById().value and change the text of using document.write(). Hence these are the main functions of HTML DOM that help in accessing, modifying the data present in HTML

Filename: index.html

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
</head>

<body>

    <h1 style="color: green; text-align: center;">
        GeeksforGeeks
    </h1>

    <form>
        <div class="wrapper" style="text-align: center;">
            Enter your name:
            <input type="text" id="t1" />
            <br><br>
            <input type="submit" 
                style="position: absolute;" 
                onclick="func()" />
        </div>
    </form>
    
    <script>
        function func() {
            var name = document.getElementById("t1").value;
            document.write("Hello" + name +
                ",this text is printed using HTML DOM ");
        } 
    </script>
</body>

</html>