DOM Manipulation in Javascript
DOM Manipulation is the heart of JavaScript's interaction with the web. It allows developers to dynamically modify, create, or remove HTML elements and CSS styles, enabling interactive and responsive web pages.
In this blog, we’ll cover the essentials of DOM manipulation, focusing on how to access, modify, and handle elements using JavaScript.
What is the DOM?
The Document Object Model (DOM) is a representation of your HTML document as a tree structure. Each element (like <div>, <p>, etc.) becomes a node in this tree. JavaScript interacts with this structure to make real-time updates to the webpage.
Selecting Elements
To manipulate elements, you first need to select them. JavaScript provides several methods to target elements.
Selecting by ID
const header = document.getElementById("main-header");
console.log(header);Selecting by Class
const items = document.getElementsByClassName("item");
console.log(items); // Returns an HTMLCollectionSelecting by Tag Name
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // Returns an HTMLCollectionModern Way: querySelector and querySelectorAll
querySelector: Selects the first matching element.querySelectorAll: Selects all matching elements as a NodeList.
const firstItem = document.querySelector(".item");
console.log(firstItem);
const allItems = document.querySelectorAll(".item");
console.log(allItems);Modifying Elements
Once you've selected elements, you can modify their content, attributes, and styles.
Changing Inner Text
const header = document.getElementById("main-header");
header.innerText = "Welcome to DOM Manipulation!";Changing Inner HTML
const container = document.querySelector(".container");
container.innerHTML = "<h2>This is dynamically added!</h2>";Changing Attributes
const link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));Adding Inline Styles
const box = document.querySelector(".box");
box.style.backgroundColor = "blue";
box.style.color = "white";Adding and Removing Elements
You can dynamically create new elements or remove existing ones.
Creating and Appending Elements
const newDiv = document.createElement("div");
newDiv.innerText = "I am a new div!";
document.body.appendChild(newDiv);Removing Elements
const itemToRemove = document.querySelector(".item");
itemToRemove.remove();Replacing Elements
const newHeading = document.createElement("h1");
newHeading.innerText = "Replaced Header!";
const oldHeading = document.getElementById("main-header");
document.body.replaceChild(newHeading, oldHeading);Handling Events
Events allow you to add interactivity, such as clicking a button or hovering over an element.
Adding Event Listeners
const button = document.querySelector(".btn");
button.addEventListener("click", () => {
alert("Button clicked!");
});Example: Changing Content on Button Click
const button = document.querySelector(".btn");
const text = document.querySelector(".text");
button.addEventListener("click", () => {
text.innerText = "You clicked the button!";
});Traversing the DOM
Sometimes, you need to navigate through parent or child elements in the DOM tree.
Parent and Child Nodes
const item = document.querySelector(".item");
console.log(item.parentNode); // Get the parent element
console.log(item.childNodes); // Get all child nodesSiblings
const item = document.querySelector(".item");
console.log(item.nextElementSibling); // Get the next sibling
console.log(item.previousElementSibling); // Get the previous sibling