What are the main functions of HTML DOM ?
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.
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 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)
- 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 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