← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 19 of 26

JS DOM मेथड्स

furniture बनाने और सजाने के लिए खासतौर पर बने एक toolkit के बारे में सोचें, एक tool कोई खास piece ढूंढता है, दूसरा शुरू से एक बिल्कुल नया piece बनाता है, एक और उसे सही जगह लगाता है, और एक ऐसा piece हटा देता है जो अब आपको नहीं चाहिए। DOM methods JavaScript के लिए वही toolkit हैं, getElementById और querySelector मौजूदा elements ढूंढते हैं, createElement नए बनाता है, appendChild उन्हें attach करता है, और removeChild उन्हें हटा देता है, जो आपको किसी page की structure पर पूरा control देते हैं। ये methods cookiescursor.com पर हर dynamic feature के पीछे असली building blocks हैं, किसी साधारण text update से लेकर तुरंत एक बिल्कुल नया component बनाने तक।

In this page:

  1. getElementById और querySelector
  2. querySelectorAll
  3. createElement और appendChild
  4. removeChild और innerHTML
  5. classList और setAttribute
Syntax
javascript 
document.createElement("tag");
parent.appendChild(element);
element.remove();
element.setAttribute("name", value);

getElementById और querySelector

getElementById() किसी single element को उसके exact id attribute से ढूंढता है, जबकि querySelector() किसी भी valid CSS selector से मैच करने वाला पहला element ढूंढता है, जो classes, attributes, या nested combinations जैसी कहीं ज़्यादा flexibility देता है।

Note: querySelector वही selector syntax स्वीकार करता है जो आप पहले से CSS से जानते हैं, .class, #id, या यहाँ तक कि tag[attribute=value]।
Warning: getElementById को बिना # symbol के एक साधारण id चाहिए, जबकि querySelector को id-based selectors के लिए # prefix चाहिए, इन्हें मिलाना एक आम गलती है।

उदाहरण: getElementById and querySelector

javascript 
<p id="intro">Hello</p>
<script>
  // Print `document.getElementById("intro")` to the console
  console.log(document.getElementById("intro"));
  // Print `document.querySelector(".missing, #intro")` to the console
  console.log(document.querySelector(".missing, #intro"));
</script>

querySelectorAll

querySelectorAll() किसी दिए गए CSS selector से मैच करने वाला हर element एक NodeList के रूप में return करता है, जिसे forEach या एक standard for...of loop से हर matching element को process करने के लिए loop किया जा सकता है।

Note: querySelectorAll से मिली एक NodeList सीधे forEach को support करती है, basic iteration के लिए पहले उसे array में बदलने की ज़रूरत नहीं।
Warning: querySelectorAll एक static snapshot return करता है, बाद में page में जोड़े गए elements उस NodeList में अपने आप नहीं दिखेंगे जिसे आपने पहले ही capture किया था।

उदाहरण: querySelectorAll

javascript 
<p class="item">A</p>
<p class="item">B</p>
<script>
  // Call `document.querySelectorAll(".item").forEach(el => console.log(el.textContent))`
  document.querySelectorAll(".item").forEach(el => console.log(el.textContent));
</script>

createElement और appendChild

createElement() memory में एक बिल्कुल नया element बनाता है, जो page पर तब तक नहीं दिखता जब तक उसे appendChild() से कहीं attach न किया जाए, जो उसे चुने गए parent element के आखिरी child के रूप में जोड़ता है।

Note: किसी नए element के content और attributes को उसे append करने से पहले सेट करें, इस तरह यह page पर एक ही visible step में पूरी तरह बना हुआ दिखता है।
Warning: createElement से बनाया गया कोई element तब तक सिर्फ memory में मौजूद रहता है जब तक appendChild (या ऐसा ही कोई method) असल में उसे visible DOM tree से attach न कर दे।

उदाहरण: createElement and appendChild

javascript 
<div id="container"></div>
<script>
  // Declare the constant `p`, set to `document.createElement("p")`
  const p = document.createElement("p");
  // Assign "New paragraph" to `p.textContent`
  p.textContent = "New paragraph";
  // Call `document.getElementById("container").appendChild(p)`
  document.getElementById("container").appendChild(p);
</script>

removeChild और innerHTML

removeChild() किसी खास child element को उसके parent से हटाता है, जिसके लिए आपको इसे parent पर ही कॉल करना होता है, जबकि innerHTML आपको एक ही step में किसी element के अंदर का markup पढ़ने या पूरी तरह बदलने देता है।

Note: सिर्फ किसी एक खास element को हटाने के लिए जिसका reference आपके पास पहले से है, element.remove() अक्सर parent.removeChild(element) से आसान होता है।
Warning: untrusted, user-provided content के साथ innerHTML सेट करना किसी page को cross-site scripting risks के आगे ला सकता है, ऐसे input को पहले सावधानी से sanitize करें।

उदाहरण: removeChild and innerHTML

javascript 
<div id="box"><span id="child">Remove me</span></div>
<script>
  // Declare the constant `box`, set to `document.getElementById("box")`
  const box = document.getElementById("box");
  // Call `box.removeChild(document.getElementById("child"))`
  box.removeChild(document.getElementById("child"));
  // Assign "<p>Replaced content</p>" to `box.innerHTML`
  box.innerHTML = "<p>Replaced content</p>";
</script>

classList और setAttribute

classList किसी element की CSS classes को manually class string parse किए बिना manage करने के लिए add(), remove(), और toggle() जैसे methods देता है, और setAttribute() किसी भी HTML attribute की value सीधे सेट करता है।

Note: classList.toggle() click से trigger होने वाले interactive show/hide या active/inactive style switches के लिए एकदम सही है।
Warning: className string property को सीधे overwrite करना एक साथ सभी मौजूदा classes को बदल देता है, सिर्फ एक class जोड़ने या हटाने के लिए classList के methods ज़्यादा सुरक्षित हैं।

उदाहरण: classList and setAttribute

javascript 
<div id="box" class="hidden"></div>
<script>
  // Declare the constant `box`, set to `document.getElementById("box")`
  const box = document.getElementById("box");
  // Call `box.classList.remove("hidden")`
  box.classList.remove("hidden");
  // Call `box.classList.add("visible")`
  box.classList.add("visible");
  // Call `box.setAttribute("data-status", "active")`
  box.setAttribute("data-status", "active");
</script>
Live Example
Related Topics

JS का DOM · JS DOM नेविगेशन · JS DOM कलेक्शन्स · JS ऐरे मेथड्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. getElementById को शुरुआती # symbol के साथ इस्तेमाल करना, querySelector के उलट, getElementById सिर्फ plain id name expect करता है।
  2. यह भूल जाना कि querySelectorAll एक static NodeList return करता है, कोई live collection नहीं जो DOM बदलने पर automatically update हो।
  3. किसी element को गलत parent से removeChild करने की कोशिश करना, removeChild को हटाए जा रहे element के असली direct parent पर कॉल करना ज़रूरी है।
चैप्टर सारांश
  • getElementById, querySelector, और querySelectorAll हर एक DOM से elements select करते हैं, वे कौन से selectors accept करते हैं और कितने elements return करते हैं इसमें अलग होते हुए।
  • createElement एक नया element बनाता है, और appendChild या removeChild उसे DOM tree से attach या detach करते हैं।
  • innerHTML, classList, और setAttribute आपको किसी element का content, CSS classes, और attributes सीधे modify करने देते हैं।
ब्राउज़र सपोर्ट

यहाँ बताए गए सभी standard DOM methods हर modern browser में समान रूप से supported हैं और foundational, stable web platform features हैं।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS DOM Collections Next Lesson → JS Events Advanced

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.