DEV Community

ABISHEK M
ABISHEK M

Posted on

DOM in JavaScript

#webdev #javascript

What is DOM?

DOM stands for Document Object Model.

The DOM is a way for JavaScript to access and interact with the HTML elements of a webpage.

In simple words:

DOM acts as a bridge between HTML and JavaScript.

HTML is used to create the structure of a webpage, while JavaScript uses the DOM to access that structure and make changes.

For example, HTML can create a heading, paragraph, and button. JavaScript can use the DOM to change their text, color, size, or other properties.

How Does DOM Work?

Suppose we have this HTML:

<h1 id="title">Hello</h1>
<p id="message">Welcome to my website</p>
<button id="btn">Click Me</button>
Enter fullscreen mode Exit fullscreen mode

When the browser loads this HTML, it creates a DOM structure:

Document
   |
  html
   |
  body
 /   |    \
h1   p    button
Enter fullscreen mode Exit fullscreen mode

Each HTML element is represented as an object in the DOM. JavaScript can access these objects and make changes to the webpage.

Real-World Example

Think about a house.

  • HTML → Blueprint of the house
  • Browser → Builds the house
  • DOM → Structure created by the browser
  • JavaScript → Person who makes changes to the house

Similarly, JavaScript uses the DOM to access a particular HTML element and modify it.

Accessing an Element

One simple way to access an element is using getElementById().

<h1 id="title">Hello JavaScript</h1>
Enter fullscreen mode Exit fullscreen mode 
let heading = document.getElementById("title");
Enter fullscreen mode Exit fullscreen mode

Here, getElementById("title") finds the element with the ID "title".

We can then change its text:

heading.textContent = "Welcome to JavaScript";
Enter fullscreen mode Exit fullscreen mode

Before:

<h1 id="title">Hello JavaScript</h1>
Enter fullscreen mode Exit fullscreen mode

After executing the JavaScript code:

<h1 id="title">Welcome to JavaScript</h1>
Enter fullscreen mode Exit fullscreen mode

So, the text inside the <h1> element changes from "Hello JavaScript" to "Welcome to JavaScript".

We can also change its style:

heading.style.color = "red";
heading.style.fontSize = "50px";
Enter fullscreen mode Exit fullscreen mode

Here, the text color becomes red and the text size increases.

For example, if the original heading is:

Hello JavaScript
Enter fullscreen mode Exit fullscreen mode

After applying the JavaScript code, the heading will become red and its text size will increase to 50px.

What Can We Do Using DOM?

Using the DOM, JavaScript can:

  • Change HTML content
  • Change CSS styles
  • Change element sizes
  • Add or remove elements
  • Respond to user actions such as button clicks

For example, when a user clicks a button, JavaScript can use the DOM to change the text or style of an element on the webpage.

Why is DOM Important?

The DOM allows JavaScript to interact with HTML and create interactive and dynamic webpages.

The basic flow is:

HTML
  ↓
Browser
  ↓
DOM
  ↓
JavaScript
  ↓
Updated Webpage
Enter fullscreen mode Exit fullscreen mode

HTML creates the structure of the webpage. The browser creates the DOM from that HTML, and JavaScript uses the DOM to access and modify the webpage.

The DOM (Document Object Model) is a representation of an HTML document created by the browser. JavaScript uses the DOM to access and manipulate HTML elements.

The easiest way to remember it is:

HTML creates the structure, the browser creates the DOM, and JavaScript uses the DOM to make changes to the webpage.

Top comments (0)