How to Manipulate the DOM in JavaScript

// Select elements
const element = document.getElementById("myId");
const elements = document.getElementsByClassName("myClass");
const first = document.querySelector(".selector");
const all = document.querySelectorAll(".selector");

// Create elements
const div = document.createElement("div");
div.textContent = "Hello World";
div.className = "box";
div.id = "newBox";

// Add to DOM
document.body.appendChild(div);
document.querySelector("#container").appendChild(div);

// Insert at specific position
const parent = document.querySelector("#parent");
const child = document.querySelector("#child");
parent.insertBefore(div, child);

// Remove elements
div.remove();
parent.removeChild(div);

// Modify content
div.textContent = "New text";
div.innerHTML = "<strong>Bold</strong> text";
div.innerText = "Plain text";

// Modify attributes
div.setAttribute("data-custom", "value");
const value = div.getAttribute("data-custom");
div.removeAttribute("data-custom");

// Modify styles
div.style.color = "red";
div.style.backgroundColor = "blue";
div.style.cssText = "color: red; background: blue;";

// Classes
div.classList.add("active");
div.classList.remove("hidden");
div.classList.toggle("visible");
div.classList.contains("active");

// Dimensions and position
console.log(div.offsetWidth, div.offsetHeight);
console.log(div.clientWidth, div.clientHeight);
console.log(div.offsetLeft, div.offsetTop);
const rect = div.getBoundingClientRect();

// Traverse DOM
console.log(div.parentNode);
console.log(div.children);
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);

// Clone element
const clone = div.cloneNode(true);

// Dataset (data-* attributes)
div.dataset.userId = "123";
div.dataset.userName = "Alice";
console.log(div.dataset.userId);

// Practical example: Dynamic list
const list = document.querySelector("#list");
const items = ["Apple", "Banana", "Cherry"];
items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  list.appendChild(li);
});