DOM Manipulation
Selecting Elements
getElementById, querySelector
💡 DOM selection methods ek search tool jaisa hai — getElementById ek exact address dhundna hai (bahut fast, unique), querySelector ek CSS-selector-jaisa flexible search hai (jaise "pehla wala jo isse match kare").
document.getElementById("id") ek specific element ID se select karta hai (fast, unique). document.querySelector("css-selector") KISI BHI CSS selector se pehla matching element deta hai (bahut flexible — .class, #id, tag, combinators sab kaam karte hain). querySelectorAll() SAARE matching elements deta hai (NodeList ke roop mein).
const header = document.getElementById("header");
const firstButton = document.querySelector(".btn"); // pehla .btn class wala
const specificDiv = document.querySelector("#main .card"); // CSS selector jaisa hi
const allButtons = document.querySelectorAll(".btn"); // SAARE .btn elements
allButtons.forEach(btn => console.log(btn)); // NodeList par forEach chalता hai🔍
DOM selection methods ek search tool jaisa hai — getElementById ek exact address dhundna hai (bahut fast, unique), querySelector ek CSS-selector-jaisa flexible search hai (jaise "pehla wala jo isse match kare").
1 / 2
⚡ Quick Recap
- getElementById = fast, sirf ID se, ek element
- querySelector = CSS selector, pehla match
- querySelectorAll = CSS selector, SAARE matches (NodeList)
Is page mein (2 subtopics)
Ek baar element select karne ke baad, uske relatives (parent, children, siblings) ko navigate kar sakte ho — parentElement, children, nextElementSibling, previousElementSibling.
const item = document.querySelector(".item");
console.log(item.parentElement); // parent element
console.log(item.children); // saare direct children
console.log(item.nextElementSibling); // agla sibling
console.log(item.previousElementSibling); // pichla siblingTip: "Element" wale versions (nextElementSibling, na ki nextSibling) prefer karo — non-Element versions text nodes (jaise whitespace) bhi include kar sakte hain, jo confusing results deta hai.
closest(selector) current element se UPAR (ancestors mein) dhundta hai, pehla matching element deta hai — event delegation mein bahut useful (aage Advanced JavaScript mein detail se).
// HTML: <div class="card"><button class="btn">Click</button></div>
button.addEventListener("click", (e) => {
const card = e.target.closest(".card");
console.log(card); // parent .card element mil jaata hai, chahe button kahi bhi nested ho
});Tip: closest() khud element ko bhi check karta hai (na sirf ancestors) — agar element khud selector match karta hai, closest() usi ko return kar dega.