344 reads

Mastering the Document Object Model (DOM)

by Shashank SharmaMarch 16th, 2023

Too Long; Didn't Read

In this blog post, we are going to deep dive into DOM and try to understand what a DOM is, and how it works. DOM acts as an interface for HTML & XML documents, which represent the content of the document as a **tree-like structure. Properties and Methods along with some attributes and functions help in interacting with and manipulating the HTML to get the desired outcome.

featured image - Mastering the Document Object Model (DOM)

In this blog post, we are going to deep dive into DOM and try to understand what a DOM is, and how it works.

Table of Contents:-

What is the DOM?
How does DOM works
- The tree structure of the DOM
- Nodes and Elements
- properties
- Methods
Selectors

What is DOM?

DOM stands for Document Object Model
It acts as an interface for HTML & XML documents, which represent the content of the document as a tree-like structure.
The DOM allows JavaScript & other programming languages to interact with and manipulate the content & structure of HTML or XML documents.
We can use DOM to add or remove elements from the page, change the text of elements, or responds to a mouse click or keyboard inputs.

How does DOM work?

When a web page is loaded, the browser creates a Document Object Model(DOM) of the page.
DOM works like a tree structure and converts the HTML code into a tree in which each node represents the elements of that particular HTML code.
The root of this tree is document objects and each node represents elements like paragraphs, images, headers, links, etc.

<html>
  <head>
    <title> DOM BLOG </title>
  </head>
  <body>
    <button> Click here to read the blog </button>
  </body>
</html>

For example, if the above code is simple HTML code, then, what DOM will do is convert this code into a tree-like structure, so that the DOM manipulation can be done easily.
Below is the image of how the above code gets converted into a tree structure by DOM.

In DOM, Properties & Methods are two types of members associated with each node or element, or object. Properties and Methods along with some attributes and functions help in interacting with and manipulating the HTML to get the desired outcome.
Let's Understand Properties and Methods with this example:-

The Properties

Let's say you have an HTML document with a heading element like this:

<h1 id="blog-head">It's a blog about DOM</h1>

Now if we want to change this heading without even touching HTML, Then what we going to do is use “DOM”.

First we “get” this heading element in JavaScript using a selector called getElementbyID(” ”);

It returns the value as an “object”.

var heading = document.getElementById('blog-head');

Then we access its inner HTML using “.innerHTML” and change its value/text accordingly.

heading.innerHTML = 'Read, Learn and Leave your Feedback!';

By doing all these steps, We change the innerHTML of the heading without even touching HTML.

Don’t worry we are going to learn selectors in just a few mins.

The Methods

Let's say you have a button element in your HTML document like this:

<button id="my-button">Click me to read the blog about DOM</button>

Now, same as above, first we select the button in JavaScript using a selector called .getElementsbyID(” ”). It returns the value as an “object”.

Now, we can manipulate and do changes with the button without touching HTML. Let’s say, we want an alert of “You clicked the button for reading the blog about DOM!” whenever a user clicks the button.

In order to do that, we need to do two things.

Add event listener which responds to the click
a function() that executes the block of code and returns the alert which says “You clicked the button for reading the blog about DOM!”.

var button = document.getElementById('my-button');
button.addEventListener('click', function() {
  alert('You clicked the button for reading the blog about DOM!');
});

This .addEventListener() is what we call a Methods in DOM. We passed two arguments in it.

click = The click on Button
function() = which shows the alert when the click happens.

NOTE:- Methods have parenthesis() at the end and Properties do not.

In summary, Properties are the value of an element, node, or object, while Methods are similar to Functions() as it has a code that gets executed when that particular Method is called.

There are differences b/w Methods() and Functions(), But it's not the topic of this blog.

SELECTORS

There are many ways to select elements inside DOM.

Let’s say we have this HTML code

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>

Now, if we want to select the “li” we use selectors:-

1) get Elements by Tag Name(””);

This Selector selects all the elements by there Tag names(li, ul, p, h1, h1 etc…)
In this case we are selecting “li”.
This selector selects all the “li” in the HTML document

document.getElementsbyTagName("li");
// HTMLCollection(3) [li.item, li.item, li.item] => Selects all 3 "li" from above HTML code

Note: Elements is plural, so it returns more than one value in form of an array.

Now, Let's style the “li”

document.getElementsbyTagName("li");
document.getElementsbyTagName("li")[0].style.color = "Red"; 
//change color of first li to red
document.getElementsbyTagName("li")[1].style.color = "Blue"; 
//change color of second li to Blue
document.getElementsbyTagName("li")[2].style.color = "Green"; 
//change color of Third li to Green

We can also change the text size and text style by using different properties in place of “style”.

You can change the style of all three elements at once using loops.

var items = document.getElementsByTagName("li");
for (let i = 0; i < 3; i++) {
  items[i].style.backgroundColor = "red";
}

2) get Elements by Class Name(””);

This selector selects all the elements with particular class names given to that element.

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>
<button class="btn">Click to read blog</button>

document.getElementsbyClassName("btn");
//This selects all the elements with .btn class in it

Similar to the above example, we can also add different properties to get a different result like changing text color, text size, and others.

document.getElementsByClassName("btn");
document.getElementsByClassName("btn")[0].textContent = "you are reading the blog"
//This changes the text content inside the button.

This selector also returns the value as an array.

3)get Element by ID(” ”);

This selector selects the element with the unique ID given to it.

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>
<button class="btn">Click to read blog</button>

Now, let's select the ul element using its ID.

document.getElementbyID("title");
//Selects element with ID Only

document.getElementbyID("title").style.color = "red";
//Styles the title element and changes its color to Red.

NOTE ⇒ ID selector has “Element” without "s" which means its singular, so it returns only single value.

Also, ID is a unique property and on every page, there is only one ID of the same name so that also clears that there’s only one single element with a particular ID.

4)query Selector(””);

So, the previous three selectors are used in specific cases(for tag name, for class, for ID) But, in query selector, we can target any element with its name only, whether it be h1,h2,h3 or ID’s like(#title) or class like(.btn)

<h1 class = "header" id = "first-head">Follow me for more such informative blogs</h1>

We can style and manipulate the h1 element in three ways here;

document.querySelector("h1").style.color = "red"
//Here we select the element with its tag name
//This changes color of element to Red

document.querySelector("#first-head").style.color = "Blue"
//Here we select the same element with its ID
//This changes color of element to Blue

document.querySelector(".header").style.color = "Green"
//Here we select the same element with its class name
//This changes color of element to Green

This is all for this blog. Read, Learn, and leave your important feedback so that I can improve my future blogs. There is going to be one more part of this blog. So stay tuned for that one.

Thank You!

Also published here.