The Document Object Model (DOM) is a programming interface used by JavaScript to interact with and manipulate HTML and XML documents. It represents the structure of a webpage as a tree of nodes, allowing developers to dynamically change content, structure, and style.
What is the DOM?
When a browser loads a web page, it creates a DOM from the HTML document. This DOM is a tree-like structure where each node is an object representing part of the page (like elements, text, or attributes). JavaScript can access and manipulate this tree to make web pages interactive.
DOM Tree Example:
htmlCopyEdit<body>
<h1 id="title">Hello World</h1>
<p class="text">Welcome to JavaScript DOM</p>
</body>
This creates a tree structure where <body> is the parent node of <h1> and <p>, and each element can be accessed or changed using JavaScript.
Accessing Elements
JavaScript provides several methods to access HTML elements.
1. getElementById()
Selects an element by its id.
javascriptCopyEditconst title = document.getElementById("title");
2. getElementsByClassName()
Returns a live HTMLCollection of all elements with the given class.
javascriptCopyEditconst texts = document.getElementsByClassName("text");
3. getElementsByTagName()
Returns all elements with the specified tag name.
javascriptCopyEditconst paragraphs = document.getElementsByTagName("p");
4. querySelector()
Returns the first element that matches a CSS selector.
javascriptCopyEditconst heading = document.querySelector("#title");
5. querySelectorAll()
Returns all elements that match a CSS selector.
javascriptCopyEditconst allText = document.querySelectorAll(".text");
Modifying Elements
After selecting an element, you can modify it in several ways.
Change Text Content
javascriptCopyEdittitle.textContent = "Updated Title";
Change HTML Content
javascriptCopyEdittitle.innerHTML = "<span>Updated with HTML</span>";
Change Attributes
javascriptCopyEdittitle.setAttribute("class", "highlight");
Change Styles
You can directly change CSS styles using the style property.
javascriptCopyEdittitle.style.color = "blue";
title.style.fontSize = "30px";
Creating and Removing Elements
You can dynamically create or delete elements on a page.
Create and Append
javascriptCopyEditconst newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);
Remove Element
javascriptCopyEditconst removeText = document.querySelector(".text");
removeText.remove();
Event Handling
Events allow you to make web pages interactive. You can listen for user actions like clicks, keypresses, etc.
Example: Button Click
htmlCopyEdit<button id="clickMe">Click Me</button>
<p id="message"></p>
<script>
const button = document.getElementById("clickMe");
const message = document.getElementById("message");
button.addEventListener("click", function () {
message.textContent = "Button was clicked!";
});
</script>
Common Events:
click– User clicks an element.mouseover– Mouse pointer over an element.keydown– Key pressed.submit– Form submission.
Example: Adding Items to a List
htmlCopyEdit<ul id="list">
<li>Item 1</li>
</ul>
<button id="add">Add Item</button>
<script>
document.getElementById("add").addEventListener("click", function () {
const newItem = document.createElement("li");
newItem.textContent = "New Item";
document.getElementById("list").appendChild(newItem);
});
</script>
Conclusion
The JavaScript DOM gives you full control over HTML and CSS, letting you create rich, interactive user experiences. By using the DOM, you can select and manipulate elements, respond to user input, and dynamically update the content of your website. Mastering the DOM is essential for any front-end web developer, and it’s a foundation for working with more advanced libraries like React or frameworks like Angular and Vue.