What is DOM in HTML?
The Document Object Model (DOM) is a structured representation of an HTML document. When a web page loads, the browser creates a DOM of the page. This DOM is a tree-like structure made up of nodes, where each node represents part of the document: elements, attributes, text, and more.
DOM allows developers to interact with HTML elements using JavaScript, enabling dynamic updates to content, structure, and styling — without reloading the entire page.
Structure of the DOM
Consider this simple HTML:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<p class="intro">Welcome to DOM HTML Tutorial.</p>
</body>
</html>
The browser parses this into a DOM tree like this:
document(root)htmlheadtitle
bodyh1p
Each HTML tag is a DOM element node, and you can manipulate them using JavaScript.
Accessing HTML Elements via DOM
You can use JavaScript to access HTML elements and modify them. The document object provides several methods for this:
1. getElementById()
Returns the element with a matching id.
javascriptCopyEditconst heading = document.getElementById("heading");
2. getElementsByClassName()
Returns all elements with a specific class name.
javascriptCopyEditconst intro = document.getElementsByClassName("intro")[0];
3. querySelector() / querySelectorAll()
These use CSS-style selectors.
javascriptCopyEditconst heading = document.querySelector("#heading");
const intro = document.querySelector(".intro");
Modifying HTML Content
Once you access an HTML element, you can change its content using properties like:
innerHTML
Changes the HTML inside an element.
javascriptCopyEditheading.innerHTML = "<em>Welcome!</em>";
textContent
Changes only the text, ignoring HTML tags.
javascriptCopyEditintro.textContent = "Let's learn about the DOM!";
Modifying HTML Attributes
You can use setAttribute(), getAttribute(), and removeAttribute().
javascriptCopyEditheading.setAttribute("class", "main-title");
let className = heading.getAttribute("class");
heading.removeAttribute("class");
Changing HTML Styles
Using .style, you can apply inline CSS styles.
javascriptCopyEditheading.style.color = "blue";
heading.style.fontSize = "32px";
You can also toggle classes using classList:
javascriptCopyEditheading.classList.add("highlight");
heading.classList.remove("highlight");
heading.classList.toggle("highlight");
Creating and Inserting HTML Elements
You can dynamically create and insert elements using:
createElement() and appendChild()
javascriptCopyEditconst newPara = document.createElement("p");
newPara.textContent = "This paragraph was added via JavaScript.";
document.body.appendChild(newPara);
insertBefore()
javascriptCopyEditdocument.body.insertBefore(newPara, heading);
Removing Elements
To remove elements:
javascriptCopyEditdocument.body.removeChild(intro);
Or directly:
javascriptCopyEditintro.remove(); // Modern browsers
Handling HTML Events
You can use the DOM to handle user actions like clicks and input:
javascriptCopyEditheading.addEventListener("click", function () {
alert("Heading clicked!");
});
This adds interactivity to your HTML through JavaScript.
DOM vs. Inner HTML File
It’s important to remember: modifying the DOM doesn’t change the original HTML file. The changes only exist in the browser’s memory while the page is open. Reloading the page restores the original HTML.
Summary
- DOM is a representation of your HTML document in memory.
- JavaScript uses the DOM to access and manipulate HTML elements.
- You can change content, attributes, styles, add or remove elements, and respond to user interactions.
By learning to control HTML through the DOM, you gain the ability to build dynamic, interactive web pages — the foundation of modern web development.