التعامل مع الصفحة في JavaScript: DOM

كل ما تعلمته حتى الآن كان يظهر في الطرفية فقط. حان الوقت لتجعل JavaScript تغيّر الصفحة نفسها: تبدّل النصوص، وتلوّن العناصر، وتضيف عناصر جديدة. في هذا الدرس ستتعرف على DOM، وهو الجسر الذي يربط JavaScript بصفحة HTML.

ما هو DOM؟

عندما يقرأ المتصفح ملف HTML، يحوّله إلى شجرة من العناصر في الذاكرة، تسمى DOM (Document Object Model). تخيّلها مثل شجرة العائلة: العنصر <html> هو الجد، وأبناؤه <head> و <body>، وداخل <body> الأحفاد مثل العناوين والفقرات والأزرار.

كل عنصر في هذه الشجرة أصبح كائناً له خصائص ودوال، تماماً مثل الكائنات التي تعلمتها في الدرس السابق. ونقطة البداية لكل شيء هي الكائن document الذي يمثل الصفحة كلها.

اختيار العناصر

قبل أن تغيّر عنصراً، يجب أن «تمسكه». هذه أهم ثلاث طرق:

// بالمعرّف id
const title = document.getElementById("title");

// بأي محدد CSS: أول عنصر مطابق
const firstNote = document.querySelector(".note");

// بأي محدد CSS: كل العناصر المطابقة
const allNotes = document.querySelectorAll(".note");
console.log(allNotes.length);

• getElementById تأخذ الـ id بدون علامة #.
• querySelector تأخذ محدداً بنفس كتابة CSS: #title للـ id، و .note للكلاس، و p لاسم الوسم. وتُرجع أول عنصر مطابق فقط.
• querySelectorAll تُرجع كل العناصر المطابقة في قائمة، يمكنك أن تعرف طولها وتمر عليها بـ forEach.

أيهم أستخدم؟

querySelector و querySelectorAll تكفيان لكل شيء تقريباً، لأنهما تفهمان أي محدد CSS. وإذا لم تجد querySelector أي عنصر، تُرجع null.

تغيير المحتوى

الخاصية textContent تقرأ نص العنصر أو تغيّره:

const title = document.querySelector("#title");
console.log(title.textContent); // اقرأ النص الحالي
title.textContent = "عنوان جديد"; // غيّره

وهناك أيضاً innerHTML التي تقبل وسوم HTML داخل النص، مثل "<strong>مهم</strong>".

انتبه مع innerHTML

لا تضع أبداً في innerHTML نصاً كتبه المستخدم، لأن شخصاً سيئ النية قد يكتب كوداً ضاراً فيُنفّذ في الصفحة. للنصوص العادية استخدم دائماً textContent، فهي آمنة.

تغيير التنسيق

يمكنك تغيير تنسيق العنصر مباشرة من خلال الخاصية style. لاحظ أن أسماء خصائص CSS المركبة تُكتب بأسلوب camelCase، فـ background-color تصبح backgroundColor:

title.style.color = "#5b5bf0";
title.style.backgroundColor = "#ececff";

لكن الطريقة الأنظف هي أن تكتب التنسيق في CSS ككلاس، ثم تضيفه أو تزيله بـ JavaScript عبر classList:

const note = document.querySelector(".note");
note.classList.add("done");     // أضف كلاس
note.classList.remove("done");  // أزله
note.classList.toggle("done");  // أضفه إن لم يكن موجوداً، وأزله إن كان موجوداً

toggle مثل زر الإضاءة: ضغطة تشعل، وضغطة تطفئ.

تغيير الخصائص (Attributes)

يمكنك تغيير خصائص الوسوم، مثل مصدر الصورة أو رابط الوسم <a>:

const img = document.querySelector("img");
img.src = "cat.png";
img.alt = "صورة قطة";

إنشاء عناصر جديدة

لإضافة عنصر للصفحة: أنشئه بـ createElement، واملأه بالمحتوى، ثم ألحقه بعنصر موجود بـ append:

const list = document.querySelector("#list");
const items = ["خبز", "لبن", "تفاح"];

for (const item of items) {
  const li = document.createElement("li");
  li.textContent = item;
  list.append(li);
}

هكذا تبني قائمة كاملة من مصفوفة! ولحذف عنصر من الصفحة استخدم element.remove().

جرّب بنفسك

هذه صفحة صغيرة فيها عنوان وفقرتان وقائمة فارغة. الكود يغيّر العنوان، ويشطب الملاحظة الثانية، ويبني القائمة من مصفوفة. أضف أصنافاً للمصفوفة، وغيّر الألوان، وجرّب toggle:

جرّب بنفسكJavaScript

محرر الكود (JavaScript)const title = document.getElementById("title"); console.log(title.textContent); title.textContent = "قائمتي الجديدة"; title.style.color = "#5b5bf0"; const notes = document.querySelectorAll(".note"); console.log("عدد الملاحظات:", notes.length); notes[1].classList.add("done"); const items = ["خبز", "لبن", "تفاح"]; const list = document.querySelector("#list"); for (const item of items) { const li = document.createElement("li"); li.textContent = item; list.append(li); }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• تشغيل الكود قبل وجود العنصر: إذا كان السكربت في <head> بدون defer، فإن querySelector تُرجع null، ثم يظهر خطأ مثل Cannot read properties of null. راجع درس «أين تكتب كود JavaScript».
• نسيان # أو . في querySelector: querySelector("title") تبحث عن وسم اسمه title، وليس عن العنصر صاحب الـ id. الصحيح "#title".
• وضع # مع getElementById: الصحيح getElementById("title") بدون #.

اختبر نفسك

سؤال

أي سطر يختار أول عنصر يحمل الكلاس card؟

document.getElementById(".card")document.querySelector(".card")document.querySelector("card")

سؤال

ما الطريقة الآمنة لوضع نص كتبه المستخدم داخل عنصر؟

styleinnerHTMLtextContent

الخلاصة

• DOM شجرة كائنات تمثل الصفحة، ونقطة البداية هي document.
• querySelector و querySelectorAll تختاران العناصر بمحددات CSS.
• textContent لتغيير النص بأمان، و classList لإضافة الكلاسات وإزالتها وتبديلها.
• style لتغيير التنسيق مباشرة، بأسماء camelCase.
• createElement ثم append لإضافة عناصر جديدة، و remove لحذفها.