Home » Tutorials » Learn Javascript » JavaScript HTML Document Object Model (DOM)

Learn Javascript

 Prev

JavaScript HTML Document Object Model (DOM)

The HTML Document Object Model (DOM) is a tree-like model where each element in a webpage is represented as an object which can be interacted upon using a programming language like JavaScript.

Prerequisites: We assume that you know just some basics of HTML and JavaScript Objects.

Why do we need Document Object Model (DOM)? 🤔

As we know, we use a markup language like HTML to create webpages. Almost all the websites in the world were created using HTML.

But, HTML can only provide structure to a website. In order to make the website more interactive like “showing alert messages or doing something when a button is clicked”, HTML alone cannot make this possible. So, the Document Object Model or DOM was created.

Using the DOM along with an object-oriented programming language like JavaScript, we can manipulate and have total control of a webpage, allowing us to make the webpage more interactive for users.

What is the HTML Document Object Model (DOM)? 🙄

The HTML Document Object Model (DOM) is a tree-shaped hierachial model that is created every time a webpage is loaded where each element inside the webpage can be represented by an object.

The concept is that if each element is an object, then each of them can have their own separate properties (data and methods), like an object can have. Then, using JavaScript, we can interact with them and control them, allowing us to create better interactive websites.

HTML Representation 👨‍💻

<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello HTML.</h1>
    <p>I love HTML.</p>
  </body>
</html>

The above HTML code is the most basic format required to be followed to create a webpage. A webpage that has the title, Document, which displays a heading Hello HTML. and has a paragraph called I love HTML. is created using this code.

Document Object Model (DOM) Representation 🤯

As we know that whenever a webpage loads, it creates a Document Object Model (DOM) of that webpage. The Document Object Model of the above webpage is given below.

HTML Document Object Model (DOM) of the above HTML Code.
Small Example of HTML Document Object Model (DOM) in a picture

Explanation

  • The Document element is at the topmost level of the tree heirarchy and all the elements are it’s children. One web document can have only one Document element.
  • The html element is the child of Document element.
  • The head and body elements are the children of html element.
  • The title element is the child of head element which further has the child text “Document“.
  • The h1 and p element are children of body element which further have the child texts “Hello HTML.” and “I love HTML.” respectively.

Each element in the DOM can also be called a node. Here, we have 7 nodes: Document, html, head, body, title, h1 and p nodes.

Applications of Document Object Model 👇

Using JavaScript, we can do almost anything with the elements of an HTML page. Some of them are as follows:

  • Find and select HTML elements. 🔎
  • Add and Delete elements. ✅
  • Add, Remove and Change attributes of HTML elements. 💅
  • Add and Change CSS styles of selected HTML elements. 😎
  • Add events in the web page. 🎞
  • Monitor and listen to events fired by elements. 📽
  • Use Event Listeners to perform actions based on the events occurred. 🎬
  • Traverse through the entire DOM or webpage. 🗺

The DOM is one of the most important things to learn if you are learning to create a web application. In the upcoming lessons, we will learn how to perform almost all the applications of the DOM listed above.

Next