التعامل مع الـ DOM: querySelector ومستمعو الأحداث

حدّد العناصر على الصفحة، وتفاعل مع النقرات، وتبنَّ تفويض الأحداث للحصول على شيفرة عالية الأداء.

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 دالة بنوع حدث: 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 مستمع. اربط مستمعًا واحدًا بالأب وحدّد العنصر المنقور بـ event.target. هذا هو تفويض الأحداث: بل يعمل حتى مع العناصر المضافة لاحقًا.

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

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

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ماذا يُعيد document.querySelector(".btn") إذا كان لدى عدة عناصر الفئة btn؟
   • كل العناصر المطابقة
   • أول عنصر مطابق فقط
   • خطأ، لأن المُحدِّد غامض
2. ما دور الوسيط الثاني لـ addEventListener؟
   • إنه الدالة التي تُنفَّذ في كل مرة يُطلَق فيها الحدث
   • إنه التأخير قبل بدء الاستماع
   • إنه مُحدِّد CSS للعنصر الهدف
3. في مستمع مربوط بأب، ماذا يمثّل event.target؟
   • الأب الذي يحمل المستمع
   • العنصر الدقيق الذي وقع عليه الحدث
   • نافذة المتصفح