2 min read

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#

javascript

const header = document.getElementById("main-header");
console.log(header);

Selecting by Class#

javascript

const items = document.getElementsByClassName("item");
console.log(items); // Returns an HTMLCollection

Selecting by Tag Name#

javascript

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // Returns an HTMLCollection

Modern Way: querySelector and querySelectorAll#

querySelector: Selects the first matching element.
querySelectorAll: Selects all matching elements as a NodeList.

javascript

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#

javascript

const header = document.getElementById("main-header");
header.innerText = "Welcome to DOM Manipulation!";

Changing Inner HTML#

javascript

const container = document.querySelector(".container");
container.innerHTML = "<h2>This is dynamically added!</h2>";

Changing Attributes#

javascript

const link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

Adding Inline Styles#

javascript

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#

javascript

const newDiv = document.createElement("div");
newDiv.innerText = "I am a new div!";
document.body.appendChild(newDiv);

Removing Elements#

javascript

const itemToRemove = document.querySelector(".item");
itemToRemove.remove();

Replacing Elements#

javascript

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#

javascript

const button = document.querySelector(".btn");
button.addEventListener("click", () => {
    alert("Button clicked!");
});

Example: Changing Content on Button Click#

javascript

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#

javascript

const item = document.querySelector(".item");
console.log(item.parentNode);  // Get the parent element
console.log(item.childNodes); // Get all child nodes

Siblings#

javascript

const item = document.querySelector(".item");
console.log(item.nextElementSibling); // Get the next sibling
console.log(item.previousElementSibling); // Get the previous sibling

Practice Code Snippet for You#

Live code runner

DOM

Open playground