JavaScript DOM Manipulation

What is the DOM?

DOM stands for Document Object Model. Browser HTML document ko objects ki tree structure me represent karta hai, aur JavaScript document object ke through us tree ko access kar sakta hai.

console.log(document);
console.log(document.title);

DOM tree idea

Elements parent-child relationship me organize hote hain. html ke andar head aur body, body ke andar headings, sections, buttons aur other elements ho sakte hain.

Selecting by id

document.getElementById() ek matching id wala element return karta hai, ya match na mile to null.

const title = document.getElementById("page-title");
console.log(title);

querySelector()

document.querySelector() CSS selector use karke first matching element return karta hai.

const card = document.querySelector(".course-card");
const heading = document.querySelector("main h1");
const button = document.querySelector("[data-action='start']");

If no element matches, the result is null.

querySelectorAll()

querySelectorAll() all matching elements ka static NodeList return karta hai.

const cards = document.querySelectorAll(".course-card");

cards.forEach(card => {
  console.log(card);
});

Reading and changing text

textContent element ke text ko read ya replace karta hai.

const message = document.querySelector("#message");

console.log(message.textContent);
message.textContent = "JavaScript is active";

User-supplied plain text dikhane ke liye textContent often safer choice hota hai because text HTML ke roop me parse nahi hota.

innerHTML and safety

innerHTML HTML markup read ya replace kar sakta hai, but untrusted user/API content ko directly innerHTML me inject karna security risk create kar sakta hai.

const panel = document.querySelector("#panel");
panel.innerHTML = "<strong>Course ready</strong>";

Attributes

Attributes ko getAttribute(), setAttribute() aur removeAttribute() se manage kar sakte ho.

const button = document.querySelector("#start-button");

console.log(button.getAttribute("aria-label"));
button.setAttribute("aria-label", "Start JavaScript course");
button.removeAttribute("disabled");

Many standard properties direct DOM properties se bhi available hote hain, for example input.value or button.disabled.

data-* attributes and dataset

Custom data-* attributes JavaScript ke liye lightweight metadata store karte hain.

const card = document.querySelector("[data-course]");
console.log(card.dataset.course);
card.dataset.status = "complete";

data-course-id JavaScript me dataset.courseId ban jata hai.

classList

classList classes ko add, remove, toggle aur check karne ka clean API deta hai.

const card = document.querySelector(".course-card");

card.classList.add("is-active");
card.classList.remove("is-hidden");
card.classList.toggle("is-selected");
console.log(card.classList.contains("is-active"));

Inline style from JavaScript

element.style inline styles ko read/write karta hai.

const progress = document.querySelector("#progress");
progress.style.width = "75%";

Dynamic numeric values ke liye useful hai, but reusable visual states ke liye classes usually better maintainability deti hain.

Creating elements

document.createElement() ek naya element object banata hai. Creation ke baad content/properties set karke DOM me insert karna hota hai.

const item = document.createElement("li");
item.textContent = "DOM Manipulation";
item.classList.add("lesson-item");

append(), prepend(), before() and after()

New elements ko page me different positions par insert kiya ja sakta hai.

const list = document.querySelector("#lesson-list");
const item = document.createElement("li");
item.textContent = "DOM Manipulation";

list.append(item);

• append() — container ke end me.
• prepend() — container ke start me.
• before() — selected element se pehle.
• after() — selected element ke baad.

Removing elements

remove() element ko DOM se hata deta hai.

const notice = document.querySelector(".temporary-notice");

if (notice) {
  notice.remove();
}

Null check important hai because selector may not find an element.

DOM traversal

Selected element ke relatives ko properties aur methods se reach kar sakte ho.

const item = document.querySelector(".lesson-item");

console.log(item.parentElement);
console.log(item.children);
console.log(item.previousElementSibling);
console.log(item.nextElementSibling);
console.log(item.closest(".course-card"));

HTMLCollection vs NodeList

Some older DOM APIs HTMLCollection return karte hain, while querySelectorAll() static NodeList deta hai. Collections ke live/static behavior different ho sakte hain, so method ka return type check karna useful habit hai.

When should DOM code run?

JavaScript ko element select karne se pehle browser ko us element ka HTML parse karna chahiye. Common approaches: script ko body ke end me load karna, external script par defer use karna, ya suitable cases me DOMContentLoaded ka wait karna.

document.addEventListener("DOMContentLoaded", () => {
  const title = document.querySelector("h1");
  console.log(title);
});

Events ko detail me next chapter me cover karenge.

DOM updates and accessibility

• Semantic elements ko preserve karo; clickable behavior ke liye real button use karo.
• Important state changes ko sirf color se communicate mat karo.
• ARIA attributes tabhi update karo jab visual/interactive state bhi corresponding ho.
• Removing or hiding focused content carefully handle karo.
• Dynamic content readable text aur meaningful labels ke saath create karo.

Performance basics

Most beginner pages me DOM speed issue nahi hota, but repeated unnecessary reads/writes avoid karna useful hai. Element ko ek baar select karke reuse karo instead of same selector repeatedly run karna.

const status = document.querySelector("#status");
status.textContent = "Loading";
status.classList.add("is-loading");

Common beginner mistakes

• Selector match na hone par null result ignore karna.
• Class selector me dot ya id selector me hash bhoolna.
• querySelector() se multiple elements expect karna.
• User-provided content ko unsafe innerHTML me inject karna.
• const selected element ko update nahi kar sakte aisa samajhna.
• Element create karke DOM me append karna bhoolna.
• Styling logic ko excessive inline styles me scatter karna.
• Deep parent traversal par dependent brittle code likhna.
• DOM code HTML parse hone se pehle run kar dena.

Beginner best practices

• Clear selectors use karo, preferably stable class/data attributes.
• Plain text ke liye textContent prefer karo.
• Visual states ke liye classList use karo.
• Dynamic elements ke liye createElement() use karo.
• Selectors ke possible null result ko handle karo.
• DOM access ko focused functions me organize karo.
• Accessibility aur semantics ko DOM update ke baad bhi preserve karo.

Chapter checklist

• DOM aur document ka role clear hai?
• getElementById(), querySelector() aur querySelectorAll() use kar sakte ho?
• textContent, attributes aur classList update kar sakte ho?
• New element create, append aur remove kar sakte ho?
• Parent/sibling/closest traversal ka basic idea clear hai?
• innerHTML ke security risk ka basic reason samajh aaya?