DOM Manipulation in JavaScript

// Selecting elements by ID
const elementById = document.getElementById("myElementId");

// Selecting elements by class name
const elementsByClass = document.getElementsByClassName("myClassName");

// Selecting elements by tag name
const elementsByTag = document.getElementsByTagName("div");

// Selecting elements by CSS selector
const elementBySelector = document.querySelector("#myContainer .myClass");
const elementsBySelectorAll = document.querySelectorAll(".myClass");

// Modifying text content
elementById.textContent = "New Text Content";

// Modifying HTML content
elementById.innerHTML = "<strong>New HTML Content</strong>";

// Changing attributes
elementById.setAttribute("src", "new-image.jpg");

// Modifying CSS styles
elementById.style.color = "red";
elementById.style.fontSize = "16px";

// Creating new elements
const newElement = document.createElement("div");

// Appending elements
elementById.appendChild(newElement);

// Removing elements
elementById.removeChild(newElement);

// Adding event listeners
elementById.addEventListener("click", () => {
  console.log("Element clicked!");
});

// Removing event listeners
const clickHandler = () => {
  console.log("Element clicked!");
};

elementById.addEventListener("click", clickHandler);
elementById.removeEventListener("click", clickHandler);

// Adding and removing classes
elementById.classList.add("newClass");
elementById.classList.remove("oldClass");

// Toggling classes
elementById.classList.toggle("active");