Dom Manipulation

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 HTMLCollection

Selecting by Tag Name

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.
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 nodes

Siblings

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

JavaScript Code Runner on: dom

IndGeek provides solutions in the software field, and is a hub for ultimate Tech Knowledge.