Introduction
The DOM is one of the core concepts in web development. Most beginners misunderstand it because most articles explain it in an advanced way. However the DOM becomes simple if explained step by step. In this beginner-friendly guide you will learn what the DOM is, why it is important, and how DOM manipulation works.
What is DOM?
The Document Object Model (DOM) is an object based, tree-like representation of the HTML document that the browser creates and stores in memory.
Explanation
In the DOM, the term Document refers to the HTML file. Inside the document every HTML content becomes an Object. The term Model refers to the tree-like structural representation of the HTML document.
The DOM is the live representation of the HTML. The browser uses it to render HTML on the website. The DOM allows browsers to make the webpage interactive.The DOM allows developers to access and modify the webpage’s content and structure using a programming language such as JavaScript.
Components of DOM
The DOM contains all the HTML content such as HTML tags, text, attributes, and comments of a webpage. In the DOM, each piece of HTML content is called a node. A node can be one of the following types:
- Document Node
- Element Node
- Text Node
- Comment Node
Document Node
It is the root node of the DOM tree and represents the <html> element. It acts as an entry point to the DOM structure, enabling access to other nodes. Every other node branches from here. It has no parent and sits at the root of hierarchy.
Element Node
The element node is a specific type of node that represents the HTML tags such as <h1>, <p>, <div>. It can also contain different attributes such as id, class, src and href.
An element node can also contain other element nodes as children if the HTML tag contains nested tags.
Text Node
The text node contains human-readable text content within HTML tags. For example, in <p>Hello, world</p>, the text ''Hello, world'' is a text node and a child of the <p> element node.
Comment Node
The comment node represents comments inside HTML and is non-executable. They are ignored by browsers and do not render on a webpage. They are used to add explanatory notes, documentation, or temporarily disable code without removing it.
Visual Representation of DOM
A visual representation of the DOM tree is necessary to understand the DOM structure. Below is the HTML page and its DOM structure respectively.
The HTML Page:
<!DOCTYPE html>
<!--Main HTML document-->
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome!</h1>
<!--This is a paragraph-->
<p>
This is a paragraph with <strong>bold text</
Here is a visual representation of how its DOM looks in memory.
Document (root)
│
├── DocumentType <!DOCTYPE html>
│
├── Comment Node: "Main HTML document"
│
└── html (Element Node)
│
├── head (Element Node)
│ └── title (Element Node)
What is the DOM Manipulation?
DOM Manipulation is the process to access, change, add or remove the style, structure and content of a webpage using a programming language (JavaScript).
DOM manipulation allows the webpages to be interactive, by allowing the developers to change the HTML content based on user actions in real-time. DOM manipulation provides the following key benefits.
- Update the Data in Real Time
- Toggle a Dropdown Menu
- Change the Content Dynamically
- Validate a Form Input
- Respond to the User Actions
How To Manipulate the DOM?
DOM manipulation can be performed in the HTML file using the <script> tag. However, the recommended method is to create a separate JavaScript file script.js and add a <script> tag inside the <head> tag of the HTML file.
Below is an example of how to link a JavaScript file in your HTML:
<script src="js/script.js" defer></script>The term defer ensures JavaScript to only load when the DOM is ready.
To make sure it's working, log the results to see inside the browser’s console. To do so add the following code inside script.js.
console.log("Hello from the external script!");Run your HTML file and check the browser console. If you see the above message, the script.js is linked properly.
DOM manipulation allows you to perform key tasks in scripts.js file such as:
- Elements Selection
- Content Modification
- Style Modification
- Elements Creation
- Element Deletion
- Event Handling
Let’s learn how to perform these tasks step by step with practical examples to make our webpage interactive.
1. Element Selection
Element Selection allows you to select the HTML elements such as <h1> , <p> , <div> tags by their:
- Class
- Id
- Tag name
Let’s understand how to apply each method to select an element.
How To Select An Element By Class Name?
To select an element by class, create a tag inside the <body> tag of the HTML file and assign it a class name. Here is a practical example of a tag with a class name.
<p class="main-paragraph">This is a practical example of a paragraph with a class.</p>To select it, apply the getElementsByClassName() method in the script.js.
const mainParagraph = getElementsByClassName(“main-paragraph”)
console.log(mainParagraph[0])How To Select An Element By Id?
JavaScript also allows you to select the element by its id by using the getElementById() method.
To see how it works, create another tag and assign it an Id. Here is an example of a tag with an Id.
<h1 id="main-heading">This is a practical example of a heading with a an Id</h1>Select it by using the getElementById() method.
const mainHeading = document.getElementById(“main-heading”)
console.log(mainHeading)How To Select An Element By Tag Name?
To select the element directly by their tag name such as <p>, <h1>, use the getElementsByTagName() method.
Let's create another tag to see how this method works in practice.
<h2 id="sub-heading">This is a practical example of a h2 heading</h2>Select the element by using the getElementsByTagName() method.
subHeading=document.getElementsByTagName(“h2”)
console.log(subHeading[0])After each method, run your HTML file. Open the browser console using the dev tool to see the logs.
Note: The reason we apply indexing on the getElementsByTagName() and getElementsByClassName() methods is because these methods select all the similar tags and return a list.
However, the getElementById() method returns only a single element, as id is a unique attribute for HTML tags. Therefore it returns a single HTML element and does not need indexing.
What is Query Selector?
Query selector is the powerful tool that allows you to select an element by class, id, and tag name with a single method.
There are two types of methods in query selector:
querySelector()querySelectorAll()
Note: The two methods uses the CSS selector syntax. Therefore it is necessary to add dot(.) and hash(#) before class and id respectively while selecting them.
querySelector():
The querySelector() method allows you to select only the first element matching the class, id or tag name.
To see this method in practice, clear your script.js file to avoid any duplicate selections. Select the tags using querySelector() method.
const firstParagraph = document.querySelector('h2');
console.log(firstParagraph)
const elementWithClass = document.querySelector('.main-paragraph');
console.log(elementwithClass)
const elementWithId = document.querySelector
querySelectorAll()
The querySelectorAll() allows you to select all the elements matching the class, id or tag name and returns a list. To see how it works, create multiple html tags with the same tag name.
<h3>First h3 Tag</h3>
<h3>Second h3 Tag</h3>
<h3>Third h3 Tag</h3>Select them using the querySelectorAll() method.
const allH3Tags=document.querySelectorAll(‘h3’)
console.log(allH3Tags)This method will return a list of all the <h3> from the HTML file. To print out each, apply a list indexing to see the desired tag.
For more detail and advance usage you can refer to the MDN Web Docs on querySelector()
2. Content Modification
Content Modification allows you to change the actual content inside the HTML tags.
To change the content, select the tag using any element selection methods.
const mainHeading= document.getElementById('main-heading')After selection, use the following methods to change the content.
- textContent
- innerHTML
text Content: This property allows you to change only the text inside any tag. You cannot create a new HTML tag inside with this property.
mainHeading.textContent = 'The New Heading';innerHTML: This property allows you to change the text and the HTML as well just like :
mainHeading.innerHTML = 'The *New* <strong>Heading</strong>!';We have also inserted a new tag <strong> inside the title Element using this method.
3. Style Modification
Style modification allows you to change the CSS styles of any HTML tag using style property.
Select the element the same way we used above.
After selection, change any CSS style like color, background color etc.
mainHeading.style.color = "blue";
mainHeading.style.backgroundColor = "black";For more advance methods on changing style you can read this MDN article on CSS styles
4. Element Creation
To create an HTML tag using DOM manipulation, use the createElement() method.
const newListedItem= document.createElement('li');Here we have created a new <li> tag. You can create any tag you want.
Note: The new elements are created inside memory. To make them visible we need to place them inside HTML.
How To Add a New Element?
It is recommended to add the text to the new element before placing it inside the HTML to make it visible, by using textContentmethod.
newListedItem.textContent = "New item";After adding the text inside a new element we need to place it inside the DOM. To achieve this, we can use one of the following methods.
appendChild()insertBefore()
appendChild(): This method allows adding a the new element inside an existing element as its last child. To see how this works in practice, let's create an unordered list with multiple children.
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>To add another listed item inside myList id, select it using the element selection method.
const list = document.getElementById("myList");After selection, add the new listed item using the appendChild() method.
list.appendChild(newListedItem);After appending, the underordered list would look like this:
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>New Item</li>
</ul>As you can see the new listed item has been added as a last child.
*insertBefore(): This method allows you to add a new element before the reference node. To understand how it works, let’s assume the above example again.
<ul id="myList">
<li id="item1">Coffee</li>
<li id="item2">Tea</li>
</ul>To add the new element before the listed item with id item2, we need to select it as a reference node.
const referenceNode = document.getElementById("item2");Now we can successfully append the new listed item before the reference node using the insertBefore() method.
This method takes two arguments. The first one is the actual node we want to append. The second argument is the reference node, before which we want to add our new node.
list.insertBefore(newListedItem, referenceNode);After insertion, the unordered list would look like this.
<ul id="myList">
<li id="item1">Coffee</li>
<li>New Item</li>
<li id="item2">Tea</li>
</ul>Note: To select the reference node, always assign it an attribute. Otherwise, selection by tag name would result in the selection of the first child.
5. Element Deletion
Deleting an element is pretty simple in DOM. Just select the element you want to delete, then use the .remove() method.
Let's assume we want to delete the <p> tag we created earlier.
<p class="main-paragraph">This is a practical example of a paragraph with a class.</p>To delete the above element, select it using the element selection method.
const elementToDelete = document.getElementById(‘main-paragraph');After selection, delete it using the remove() method.
elementToDelete.remove();This method is the simplest and recommended way for modern web development. It is supported by all web browsers.
How to Delete Multiple Elements?
Sometimes there are multiple elements you want to remove. Removing them individually requires so much effort. To avoid this, there is a recommended way to remove them efficiently.
Look at the example below where we have multiple tags with .unwanted-class.
<header class="unwanted-class">
<h1>Header with an Unwanted Class</h1>
</header>
<main>
<p class="important-class">This paragraph has an important class.</p>
<div>
<span class="unwanted-class">A span with an unwanted class.</span>
To remove all the tags with .unwanted class, select them using querySelectorAll().
const unwantedItems = document.querySelectorAll('.unwanted-class');
unwantedItems.forEach(item => {
item.remove();
});The querySelectorAll() method would select all the elements with .unwanted-item class name.
After selection, loop over them using forEach(). This method will remove all the items without removing them manually.
6. Event Handling
There are certain cases where you want to respond to the user events like mouse click, keyboard input, page scroll etc. To achieve this, JavaScript provides event listeners that listen to the specific events and perform certain actions.
Let’s understand how event handling works with a practical example. Suppose you have the button and a div inside an HTML file.
<div id="colorBox">Change Color</div>
<button id="changeColorButton">Change Color</button>To change the div color when the button is clicked, we need to select both.
const colorBox = document.getElementById('colorBox');
const changeColorButton = document.getElementById('changeColorButton');After selection we can add the mouse click event on the changeColorButton using DOM method addEventListener()
changeColorButton.addEventListener('click', function() {
// Change the background color of the div
colorBox.style.backgroundColor = “red”
});Let's understand what happened above, we applied a click event on the button. Whenever the button is clicked, the div color would be changed to red.
To learn more about event listeners read the MDN Docs on Event Listeners
FAQ
What is the difference between DOM and HTML?
HTML is a static text text file, while DOM is the live representation of HTML inside browser memory to make it interactive.
What is the difference between querySelector() and querySelectorAll()?
Both methods are used to select the HTML element by class, id, or tag name.
The only difference is querySelector() only returns the first element, while querySelectorAll() returns a list of all the matching elements.
Can we also manipulate DOM by programming languages other than JavaScript?
JavaScript is essentially the only language that can directly manipulate DOM. This is because all browsers have built in JavaScript interpreters that are designed to access DOM.