DOM model in JavaScript – complete guide

Hey readers, we are going to discuss everything about the dom model in JavaScript, including some of its must-know methods and properties. Let’s get started without any delay.

Introduction

JavaScript is one of the most widely used languages for creating web pages. Did you ever wonder why is it so? One of the main reasons for it is because using javascript, we can make a website respond to the user’s actions. JavaScript was able to do it easily because of DOM. If you are into web development, you would have surely heard the word DOM. What is DOM? DOM stands for document object model. It is the way in which a website is represented in a simpler way in terms of objects. With it, a programmer can easily access the elements present in the document and also can make changes if needed.

Why HTML DOM?

An HTML DOM is the representation of an HTML document. Why do you think we need an object model of the HTML document when we have the direct HTML document available? It is because, at the browser level, JavaScript cannot understand the syntax of the HTML file. So we need a special representation of it, that JavaScript can understand. To render these requirements, an HTML document is represented in the form of an object model where all the elements, tags, etc are in the form of objects. We can make changes to the elements, tags, attributes, etc in the HTML document and also can add new ones easily using JavaScript. We can also make changes in CSS using JavaScript.

Structure of DOM

The structure of DOM is compared with that of a tree with elements, both parent and child elements, in the form of objects. Each of the elements in the DOM is known as a node. We can also add events to the elements of the DOM. If there are multiple nodes present, we can access them with the help of their unique index.

There are many methods and properties with which we can view and manipulate the object model. Let us explore them.

Access elements

As we have already discussed that we can manipulate the elements of the HTML document using JavaScript. In order to change elements, we need to first get elements i.e we have to access them. There are many ways in which we can access them. Let us discuss some of them.

By targeting ID

A unique id attribute can be given to an element in the HTML document. We can access that particular element of the document with the given id by using the method getElementbyId(). Let us understand its syntax.

Syntax

document.getElementbyId(ID name);Code language: JavaScript (javascript)

ID name

This is the only parameter of this method. It is the string that we have given to an element of HTML as an ID.

Return Value

It returns the element of the document whose id we have given as a parameter. If none of the elements have the id we have given as a parameter, then a null is returned. Once the element gets accessed, we can make operations on it.

By targeting class

The class attribute can be given to multiple elements in an HTML document. We can access all those elements with the same class name using the method getElementsByClassName(). Let us understand its syntax.

Syntax

document.getElementsByClassName(class name)Code language: JavaScript (javascript)

Class name

This is the only parameter in this method. We put the class name of the elements that we need to access in this parameter.

Return value

All the elements with the given class names get accessed and we can manipulate them with other methods.

By targeting tags

An HTML document can contain many tags. They are usually enclosed within triangular brackets. Examples of tags are <p>, <h1>, <strong>, <em>, <abbr> etc. We can target tags with the help of the method getElementsByTagName(tagName). Let us understand its syntax.

Syntax

document.getElementsByTagName(tagname)Code language: JavaScript (javascript)

Tag Name

We should put the name of the tag which we want to access inside it. It is the only parameter of this method.

Return value

All the tags will get accessed. Once they are accessed we can manipulate them with subsequent commands.

By query selector

We can target the element with single or multiple selectors using the query selector method. We can do it by querySelector() and querySelectorAll() methods. Let us understand their syntax.

Syntax

document.querySelector("h1, p, span")
document.querySelectorAll("h1, p, span")Code language: JavaScript (javascript)

Selector

These two methods have only one parameter. We have to put the single or multiple selectors of elements in the HTML document.

Return value

In the first method, the first element in the HTML document which corresponds to the selector in the parameter is accessed whereas, in the second method, all the elements in the HTML document which correspond to the given selector get accessed.

Create and delete elements

In all the above methods, we have seen how we can access the elements of an HTML document. Just accessing with manipulating them is of no use. So now we are going to discuss some of the ways in which we can create and delete elements of the HTML document.

Create element 

We can create an HTML element using JavaScript. The element that is created becomes a node in the HTML DOM. Let us discuss the syntax of the createElement() method using which we can create elements.

Syntax

document.createElement(name)Code language: JavaScript (javascript)

Name

This is the only parameter for this method. In this parameter, we have to put the name of the node which we want to create.

Return value

A node gets created in the dom. For example, if we put div in the name parameter, a div gets created.

Append child

We can add a node to a parent as the last child of the parent node using the append child method. Let us understand the syntax of this method.

Syntax

parent.appendChild(childnode)Code language: JavaScript (javascript)

Parent

This is the node to which we want to add an element as the last member

Child node

This is the element we want to add to a parent node as the last node.

Return value

We get the parent node getting added with the provided child as the last element.

Remove child

At times, there comes a need of removing the created or already present child in the parent node. We can use the removeChild() method to remove them. Let us understand its syntax

Syntax

Parent.removeChild(child)Code language: JavaScript (javascript)

Parent

This is the node from which we want to delete an element.

Child node

This is the element we want to delete from the parent node.

Return value

It returns a node by deleting the element specified in the parameter.

Replace nodes

We can also replace an older node in a parent node with a new node with the help of the replaceChild() method. Let us understand its syntax

Syntax

parent.replaceChild(new, old)Code language: JavaScript (javascript)

Parent 

This is the parent node inside which you want to replace a node with a newer one

New and old 

New is the new node that we want to replace with an old node i.e old in the syntax.

Insert a node before an existing one

We can directly insert a node before a particular node inside a parent node using the DOM methods. We use the insertBefore() method for it. Let us understand its syntax

Syntax

parent.insertBefore(new, before)Code language: JavaScript (javascript)

Parent 

This is the parent node inside which you want to add a new node.

New

It is the new node that you want to add

Before

It is the node before which you want to add the new one

Return value

The parent node gets added with the new node specified in the parameter before the older node.

Dom events

We can specify what to do to the HTML elements when a particular condition satisfies using JavaScript. They are known as events. The document object model contains events. The events are generally paired with functions. The function gets executed only when the event is triggered. There are many events such as click, mouseover, etc. 

An example of the syntax of how we can use these events in JavaScript is shown below

object.addEventListener("click", function());Code language: JavaScript (javascript)

We can access any object using the methods we have discussed earlier in this article. In place of click, we can use any event from many events that are available. Let us discuss some of the most used events.

click: The function gets triggered on clicking the object

mouseover: The function gets triggered when the mouse hovers over the object

dblclick: The function gets triggered when the object is clicked twice

keypress: The function gets triggered when the user presses a key

mousedown: The function gets triggered when the user clicks the mouse

mouseleave: The function gets triggered when the mouse leaves the object

cut: The function gets triggered when the user cuts the content of the object

copy: The function gets triggered when the user copies the content of the object

Conclusion

In this article, we have discussed the Document Object Model(DOM) of javascript. We have discussed multiple ways in which we can access, create and delete elements of the HTML document. We have also discussed the HTML DOM events and also about the frequently used events and their syntax. Understanding DOM is very important for any web developer. I hope that this article has added value to your knowledge. That’s it for this article. If you want to learn more about DOM, do check out the course JavaScript DOM Projects on codedamn where you learn DOM by doing a lot of projects. Codedamn have inbuilt playgrounds. So you don’t have to create some special environment to code. You can code in the codedamn website itself without any disturbance. With a very good community, all of your doubts can be solved instantly.