Manipulating the DOM: querySelector, event listeners

पेज पर एलिमेंट्स चुनें, क्लिक्स पर प्रतिक्रिया दें, और परफ़ॉर्मेंट कोड के लिए event delegation अपनाएँ।

9 मिनट · 3 प्रश्न

DOM आपके HTML पेज का जीवंत प्रतिनिधित्व है: इसे मैनिपुलेट करना ही वह तरीका है जिससे JavaScript किसी इंटरफ़ेस को इंटरैक्टिव बनाता है। अनिवार्य जोड़ी: किसी एलिमेंट को चुनना, फिर उसके साथ जो होता है उसे सुनना। आइए एक छोटी शुरुआती संरचना से शुरू करें।

<button id="save-btn" class="btn">Save</button>
<ul class="task-list">
  <li>Buy groceries</li>
  <li>Call the client</li>
</ul>

querySelector किसी भी CSS सेलेक्टर (#id, .class, ul li, [data-id]) को स्वीकार करता है और पहला मैच करने वाला एलिमेंट लौटाता है, या null। querySelectorAll सभी मैच करने वाले एलिमेंट्स को एक NodeList में लौटाता है, जिस पर आप forEach से पुनरावृत्ति कर सकते हैं।

const button = document.querySelector("#save-btn");
const firstTask = document.querySelector(".task-list li");
const tasks = document.querySelectorAll(".task-list li");

console.log(tasks.length); // 2
console.log(firstTask.textContent); // "Buy groceries"

किसी उपयोगकर्ता क्रिया पर प्रतिक्रिया देने के लिए, addEventListener किसी event प्रकार से एक फ़ंक्शन जोड़ता है: click, input, submit, keydown... वह फ़ंक्शन एक event ऑब्जेक्ट प्राप्त करता है जो बताता है कि क्या हुआ। इसके बाद आप textContent से सामग्री और classList से स्टाइलिंग बदल सकते हैं।

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

button.addEventListener("click", () => {
  button.textContent = "Saved!";
  button.classList.add("success");
});

एक अच्छी प्रोफ़ेशनल आदत: 200 आइटम की सूची 200 listeners की हक़दार नहीं है। पैरेंट पर एक अकेला listener जोड़ें और क्लिक किए गए एलिमेंट की पहचान event.target से करें। यही event delegation है: यह बाद में जोड़े गए एलिमेंट्स के लिए भी काम करता है।

const list = document.querySelector(".task-list");

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (item) {
    item.classList.toggle("done");
  }
});

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. अगर कई एलिमेंट्स में btn क्लास हो तो document.querySelector(".btn") क्या लौटाता है?
   • सभी मैच करने वाले एलिमेंट्स
   • केवल पहला मैच करने वाला एलिमेंट
   • एक एरर, क्योंकि सेलेक्टर अस्पष्ट है
2. addEventListener के दूसरे तर्क की भूमिका क्या है?
   • यह वह फ़ंक्शन है जो हर बार event होने पर चलता है
   • यह सुनना शुरू होने से पहले की देरी है
   • यह लक्षित एलिमेंट का CSS सेलेक्टर है
3. किसी पैरेंट से जुड़े listener में, event.target किसका प्रतिनिधित्व करता है?
   • वह पैरेंट जिस पर listener है
   • ठीक वह एलिमेंट जिस पर event घटित हुआ
   • ब्राउज़र विंडो