DOM Manipulation in JavaScript

DOM manipulation is a fundamental aspect of web development, allowing developers to dynamically interact with and modify the structure, content, and style of HTML documents. The Document Object Model (DOM) represents the hierarchical structure of an HTML document, and JavaScript provides powerful methods to manipulate it. Let’s explore the basics of DOM manipulation.

1. Accessing Elements:

a. By ID:

// Get element by ID
let headingElement = document.getElementById("myHeading");

b. By Class Name:

// Get elements by class name (returns a NodeList)
let buttons = document.getElementsByClassName("btn");

c. By Tag Name:

// Get elements by tag name (returns a NodeList)
let paragraphs = document.getElementsByTagName("p");

d. Query Selector:

// Get the first element that matches a CSS selector
let firstButton = document.querySelector(".btn");

e. Query Selector All:

// Get all elements that match a CSS selector (returns a NodeList)
let allButtons = document.querySelectorAll(".btn");

2. Manipulating Content:

a. Getting and Setting Text Content:

// Get text content
let paragraphText = document.getElementById("myParagraph").textContent;

// Set text content
document.getElementById("myParagraph").textContent = "New content";

b. Getting and Setting HTML Content:

// Get HTML content
let divContent = document.getElementById("myDiv").innerHTML;

// Set HTML content
document.getElementById("myDiv").innerHTML = "<p>New HTML content</p>";

3. Manipulating Attributes:

a. Getting and Setting Attribute Values:

// Get attribute value
let imageSrc = document.getElementById("myImage").getAttribute("src");

// Set attribute value
document.getElementById("myImage").setAttribute("src", "new-image.jpg");

4. Adding and Removing Elements:

a. Creating Elements:

// Create a new element
let newParagraph = document.createElement("p");

b. Appending Elements:

// Append an element to a parent element
document.getElementById("parentDiv").appendChild(newParagraph);

c. Removing Elements:

// Remove an element
let elementToRemove = document.getElementById("elementToRemove");
elementToRemove.parentNode.removeChild(elementToRemove);

5. Event Handling:

// Add an event listener
document.getElementById("myButton").addEventListener("click", function () {
  console.log("Button clicked!");
});

6. Style Manipulation:

// Changing CSS styles
document.getElementById("myElement").style.color = "red";
document.getElementById("myElement").style.fontSize = "20px";

7. Traversing the DOM:

// Traversing parent, child, and sibling elements
let parentElement = document.getElementById("parentElement");
let firstChild = parentElement.firstChild;
let nextSibling = firstChild.nextSibling;
let previousSibling = nextSibling.previousSibling;

DOM manipulation is a powerful tool for creating dynamic and interactive web pages. These basic examples cover common tasks, but the DOM provides a wide range of methods and properties for more advanced manipulation. Always keep performance in mind when manipulating the DOM, especially in scenarios with frequent updates or large document structures.