DOM Manipulation

DOM (Document Object Model) কী?

Browser HTML পেজকে একটি Tree structure হিসেবে রিপ্রেজেন্ট করে — এটাই DOM। JavaScript দিয়ে DOM access ও modify করা যায়।

document
  └── html
       ├── head
       │    └── title
       └── body
            ├── h1
            ├── p
            └── div

Element Select করা

// By ID (একটি)
let el = document.getElementById("header");

// By Tag name (HTMLCollection)
let paragraphs = document.getElementsByTagName("p");

// By Class name (HTMLCollection)
let items = document.getElementsByClassName("item");

// querySelector — CSS selector দিয়ে (প্রথম match) ⭐
let btn = document.querySelector(".btn");
let nav = document.querySelector("#nav > ul");

// querySelectorAll — সব match (NodeList)
let allBtns = document.querySelectorAll(".btn");
allBtns.forEach(btn => btn.style.color = "red");

Content পরিবর্তন

let el = document.getElementById("title");

// Text
el.textContent = "নতুন টেক্সট";
el.innerText = "নতুন টেক্সট";

// HTML (⚠️ security risk — XSS)
el.innerHTML = "<strong>মোটা</strong>";

// Attribute
el.getAttribute("href");
el.setAttribute("href", "https://example.com");
el.removeAttribute("disabled");

// shorthand
el.id = "newId";
el.href = "...";
el.src = "...";

Style পরিবর্তন

let box = document.querySelector(".box");

// Inline style (camelCase!)
box.style.backgroundColor = "red";
box.style.fontSize = "20px";
box.style.display = "none";

// Class manipulation ⭐ (সেরা পদ্ধতি)
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("open");
box.classList.contains("active");  // true/false
box.classList.replace("old", "new");

Element তৈরি ও যোগ করা

// নতুন element তৈরি
let newDiv = document.createElement("div");
newDiv.textContent = "নতুন div";
newDiv.className = "card";
newDiv.id = "mycard";

// Parent এ যোগ
let container = document.querySelector(".container");
container.appendChild(newDiv);           // শেষে
container.prepend(newDiv);                // শুরুতে
container.insertBefore(newDiv, child);   // আগে

// আধুনিক (insertAdjacentHTML)
container.insertAdjacentHTML("beforeend", "<p>Hi</p>");
// "beforebegin", "afterbegin", "beforeend", "afterend"

// মুছে ফেলা
newDiv.remove();
container.removeChild(newDiv);

Traverse (আশেপাশের element)

el.parentElement
el.children           // সব child
el.firstElementChild
el.lastElementChild
el.nextElementSibling
el.previousElementSibling