Every modern website we interact with today is dynamic. When we click a button, type into a search box, or see new content appear without refreshing the page, JavaScript is working behind the scenes to update the webpage instantly. But how does JavaScript know which part of the page to update?
This is where the Document Object Model (DOM) comes into play.
By the end of this guide, you will have a solid understanding of how the DOM works and why it is one of the most important concepts in front-end development.
1. What is the DOM?
The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree structure of objects.
When the browser loads a webpage, it converts the HTML into a DOM tree, which JavaScript can access and modify.
Example HTML:
<body>
<h1>Welcome</h1>
<p>Hello Students</p>
</body>
DOM Tree:
Document
|
body
/ \
h1 p
Each HTML element becomes a node in the DOM tree.
2. Types of DOM Nodes
The DOM consists of different types of nodes.
Document Node
The root of the entire page.
document
Element Nodes
All HTML elements are element nodes.
Examples:
<h1>
<div>
<ul>
<p>
Text Nodes
The text inside elements.
Example:
<p>Hello World</p>
Here:
-
<p>→ element node -
Hello World→ text node
Attribute Nodes
Attributes attached to elements.
Example:
<img src="image.jpg" alt="picture">
Attributes:
srcalt
3. Accessing the DOM
The browser provides the** document object** to interact with the DOM.
Example:
console.log(document);
This displays the full DOM structure in the console.
4. Selecting Elements (DOM Selection)
Before modifying anything, JavaScript must select the element.
getElementById()
Select element using ID.
<h1 id="title">Hello</h1>
document.getElementById("title");
getElementsByClassName()
Select elements with a specific class.
document.getElementsByClassName("box");
Returns an HTMLCollection.
getElementsByTagName()
Select elements by tag name.
document.getElementsByTagName("p");
Returns an HTMLCollection.
querySelector()
Returns the first matching element.
document.querySelector(".box");
querySelectorAll()
Returns all matching elements.
document.querySelectorAll(".box");
Returns a NodeList.
5. DOM Manipulation
DOM manipulation means changing the webpage dynamically using JavaScript.
Main categories include:
• Change text
• Change styles
• Add or remove elements
• Respond to user actions
6. Changing Text Content
- innerText - Changes visible text.
- textContent -Changes all text including hidden content.
- innerHTML - Changes HTML inside the element.
Example:
<div id="box">
Hello <span style="display:none;">World</span>
</div>
Output
console.log(box.innerText);
// Hello
console.log(box.textContent);
// Hello World
console.log(box.innerHTML);
// Hello <span style="display:none;">World</span>
7. Changing Styles
JavaScript can directly change CSS properties.
Example:
element.style.color = "red";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";
Important rule:
CSS property → camelCase in JavaScript
8. Manipulating Classes
The classList property helps manage CSS classes.
Add a class
element.classList.add("active");
Remove a class
element.classList.remove("active");
Toggle a class
element.classList.toggle("active");
Check if class exists
element.classList.contains("active");
9. Creating Elements
JavaScript can create new HTML elements.
let div = document.createElement("div");
Add text:
div.innerText = "Hello";
10. Adding Elements to the DOM
There are several methods to insert elements.
append()
Adds element at the end.
parent.append(child);
Example:
document.body.append(div);
appendChild()
Also adds element at the end.
parent.appendChild(child);
Difference:
- appendChild → only one node
- append → multiple nodes and text allowed
prepend()
Adds element at the beginning.
parent.prepend(child);
before()
Insert element before another element.
element.before(newElement);
after()
Insert element after another element.
element.after(newElement);
insertAdjacentHTML()
Insert HTML at specific positions.
element.insertAdjacentHTML("beforeend", "<p>Hello</p>");
Positions:
beforebegin
afterbegin
beforeend
afterend
11. Removing Elements
remove()
Removes element directly.
element.remove();
removeChild()
Removes a child from a parent.
parent.removeChild(child);
12. Replacing Elements
replaceWith()
Replace an element with another.
oldElement.replaceWith(newElement);
replaceChild()
parent.replaceChild(newChild, oldChild);
13. Attribute Manipulation
JavaScript can change HTML attributes.
setAttribute()
Add or update attribute.
element.setAttribute("class", "box");
getAttribute()
Get attribute value.
element.getAttribute("class");
removeAttribute()
Remove attribute.
element.removeAttribute("class");
Conclusion
The DOM provides a structured way for JavaScript to interact with HTML documents. By understanding how nodes, elements, traversal, and manipulation work, developers can dynamically control webpage content and structure. Learning the DOM is a foundational skill for building interactive and modern web applications.
Top comments (0)