JavaScript والـ DOM: صفحة تتفاعل

طريقان إلى نفس الفكرة

قبل أن تبدأ

الفكرة الجوهرية

1شجرة DOM: الصفحة ككائنات

حين يقرأ المتصفح HTML، يبني منه شجرة: document في الجذر، تحته html، تحته head وbody، وهكذا. كل عنصر في الشجرة كائن JavaScript له خصائص تقرؤها وتغيّرها (textContent، id، className) وطرق تناديها (append، remove). غيّر الكائن، تتغيّر الصفحة فورًا.

2اختيار العناصر وتعديلها

document.querySelector(".total") يعطيك أول عنصر يطابق المحدّد (نفس محدّدات CSS)، أو null إن لم يجد. وquerySelectorAll يعطيك كلها في قائمة تمرّ عليها بـ forEach. بعدها: textContent للنص، وclassList.add/remove/toggle للأصناف (والشكل يأتي من CSS)، وsetAttribute أو الخاصية مباشرة (img.src) للخصائص، وdataset لخصائص data-*، وstyle للأنماط المباشرة.

3إنشاء العناصر وحذفها

document.createElement("li") يصنع عنصرًا جديدًا في الذاكرة، تعطيه نصًّا وأصنافًا، ثم تضعه في الصفحة بـ parent.append(el) (في النهاية) أو prepend (في البداية). وel.remove() يحذفه. وparent.replaceChildren(...list) يستبدل كل الأبناء بقائمة جديدة دفعة واحدة، وهو مثالي لإعادة رسم قائمة.

4الأحداث: استمع ثم تصرّف

el.addEventListener("click", fn) يربط دالة بحدث: «حين يحدث هذا، نفّذ ذلك». أشهر الأحداث: click للضغط، وinput كلما تغيّر نص حقل، وchange حين يتأكّد التغيير، وsubmit لإرسال النموذج، وkeydown لضغط مفتاح. والدالة تستلم كائن الحدث event فيه تفاصيله: event.target العنصر الذي وقع عليه، وevent.key المفتاح المضغوط.

النماذج: استمع لـ submit على النموذج نفسه لا لـ click على الزر، فيغطّي Enter أيضًا ويحافظ على التحقّق المدمج. ونادِ event.preventDefault() أول سطر حتى لا تُعاد تحميل الصفحة. وform.elements.name.value يقرأ قيمة الحقل الذي name="name".

5تفويض الأحداث: مستمع واحد لقائمة كاملة

قائمة فيها مئة زر حذف؟ لا تضع مئة مستمع. الأحداث تصعد (bubble) من العنصر الذي ضُغط إلى أبيه ثم جدّه حتى document. فضع مستمعًا واحدًا على القائمة، وevent.target.closest("li") يخبرك أي بند ضُغط. ويعمل حتى للبنود التي تُضاف لاحقًا، لأن المستمع على الأب الثابت.

// simulating bubbling without a browser: each node knows its parent
const tree = { name: "ul#list", parent: null };
const li = { name: "li[data-id=2]", parent: tree };
const button = { name: "button.delete", parent: li };

function dispatch(target) {
  const path = [];
  for (let node = target; node; node = node.parent) path.push(node.name);
  return path;
}

console.log("click travels:", dispatch(button).join("  ->  "));
console.log("so a single listener on", tree.name, "hears clicks from every item");

6الحالة أولًا ثم الرسم

أكبر فكرة في هذا الدرس: بدل أن تعدّل الصفحة في عشرة أماكن (أضف هنا، احذف هناك، حدّث العدّاد)، احفظ البيانات في متغير واحد (الحالة)، واكتب دالة render() واحدة ترسم الصفحة كاملة منها. كل حدث يعدّل الحالة ثم ينادي render. الصفحة لا تختلف عن البيانات أبدًا، والأخطاء تقل كثيرًا. وهذه بالضبط الفكرة التي بُني عليها React.

// the logic part runs anywhere; the page part needs a browser
let todos = [{ id: 1, text: "buy beans", done: false }];

function add(text) {
  todos = [...todos, { id: todos.length + 1, text, done: false }];
}
function toggle(id) {
  todos = todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t));
}
function render() {          // in the browser this builds <li> elements
  return todos.map((t) => `${t.done ? "[x]" : "[ ]"} ${t.text}`).join("\n");
}

add("grind coffee");
toggle(1);
console.log(render());
console.log("left:", todos.filter((t) => !t.done).length);

7localStorage: ذاكرة تبقى بعد التحديث

كل متغيرات JavaScript تُمسح حين تُحدَّث الصفحة. localStorage مخزن صغير في المتصفح يبقى بعد التحديث وإغلاق المتصفح: setItem(key, text) تحفظ وgetItem(key) تقرأ. وهو يخزّن نصوصًا فقط، لذلك تحوّل المصفوفة بـ JSON.stringify قبل الحفظ وتعيدها بـ JSON.parse بعد القراءة.

// in the browser
localStorage.setItem("todos", JSON.stringify(todos));         // save

const saved = JSON.parse(localStorage.getItem("todos") ?? "[]"); // load (or empty list)

8الأمان: textContent لا innerHTML

innerHTML يفسّر النص كـ HTML. لو وضعت فيه شيئًا كتبه المستخدم، وكتب <img src=x onerror="سرقة_الجلسة()">، سيُنفَّذ كوده في صفحتك على أجهزة كل من يرى تعليقه. هذا هجوم XSS (حقن سكربت عبر المواقع)، من أشهر ثغرات الويب. القاعدة: أي نص من المستخدم يدخل بـ textContent، والعناصر تُبنى بـ createElement.

مثال محلول

قائمة مهام كاملة، تعمل هنا الآن: الحالة في مصفوفة، render يرسم كل شيء منها، مستمع واحد للنموذج وواحد مفوَّض للقائمة، وlocalStorage للحفظ. أضف مهمة، اضغط على نص مهمة لشطبها، واحذف أخرى. ثم اقرأ الكود من أعلى لأسفل: كل سطر فيه شرحناه في هذا الدرس.

خرافة مقابل حقيقة

أين تقابله في العمل

اختبر فهمك

بطاقات مراجعة سريعة

تحقق من فهمك