{"id":"l-js-4-1","courseId":"javascript-fundamentals","lang":"ar","kind":"lesson","summary":"تفهم الـ DOM على أنه شجرة الصفحة الحيّة في المتصفّح، وتحدّد العناصر بمحدّدات CSS، وتغيّر نصوصها وأصنافها وسماتها، وتعرض قائمة انطلاقًا من البيانات.","html":"

كل ما فعله Pocket حتى الآن حدث في الـ console. لكن المستخدم الحقيقي لا يفتح الـ console أبدًا؛ إنه يرى صفحة. وباقي هذا القسم ينقل Pocket إلى تلك الصفحة، وأول خطوة أن تتعلّم كيف ترى JavaScript صفحة الويب أصلًا.

\n

الـ DOM: الصفحة على شكل كائنات

\n

حين يحمّل المتصفّح HTML، لا يحتفظ به نصًا. بل يبني شجرة من الكائنات، كائنًا لكل عنصر، ويرسم الصفحة من تلك الشجرة. هذه الشجرة هي الـ DOM (نموذج كائنات المستند، Document Object Model)، والكائن العام document هو جذرها.

\n
index.html
<body>\n  <h1>Pocket</h1>\n  <p id=\"total\">Total: $0.00</p>\n  <ul id=\"expense-list\"></ul>\n  <script src=\"app.js\" defer></script>\n</body>
\n
\n شجرة الـ DOM لصفحة Pocket: يحتوي document على body، ويحتوي body على h1، وعلى p معرّفه total، وعلى ul معرّفه expense-list. تقرأ JavaScript هذه الكائنات وتغيّرها، فيعيد المتصفّح رسم الصفحة.\n \n document\n \n body\n \n h1\n \n p#total\n \n ul#expense-list\n \n \n \n \n JavaScript تغيّر هذه\n
يحوّل المتصفّح HTML إلى شجرة من كائنات العناصر
\n

الـ DOM حيّ. غيّر كائنًا في الشجرة فيعيد المتصفّح رسم ذلك الجزء من الصفحة على الفور. وهذا كل ما يعنيه “تحديث الصفحة”.

\n

السمة defer تخبر المتصفّح أن يشغّل app.js بعد أن يبني الشجرة كلها. ودونها، يُنفَّذ السكربت الموجود في <head> قبل أن يوجد الـ body، فلا يجد أي بحث شيئًا. أما السكربتات المحمّلة بـ type="module"، التي ستتعرّف عليها في القسم 5، فتُؤجَّل تلقائيًا.

\n

تحديد العناصر

\n

document.querySelector(selector) تأخذ محدّد CSS، أي الصياغة نفسها التي تكتبها في ملف الأنماط، وتُرجع أول عنصر مطابق. وquerySelectorAll تُرجع كل العناصر المطابقة.

\n
app.js
const totalEl = document.querySelector(\"#total\");          // by id\nconst list = document.querySelector(\"#expense-list\");\nconst firstItem = document.querySelector(\"#expense-list li\");\nconst allItems = document.querySelectorAll(\"li.big\");      // every match
\n

querySelectorAll تُرجع NodeList. لها forEach وتعمل مع for...of؛ وانشرها، [...allItems]، حين تريد دوال المصفوفات مثل map وfilter.

\n

حين لا يطابق شيء، تُرجع querySelector القيمة null، فيرمي السطر التالي الذي يستخدم النتيجة TypeError: Cannot set properties of null. وهذا الخطأ يعني في الغالب خطأً إملائيًا في المحدّد أو سكربتًا نُفّذ مبكرًا جدًا.

\n

تغيير ما هو موجود

\n

حين تحصل على عنصر، تصبح خصائصه أدوات التحكّم:

\n
app.js
totalEl.textContent = \"Total: $30.20\";      // replace the text\ntotalEl.classList.add(\"over-budget\");       // add a CSS class\ntotalEl.classList.toggle(\"highlight\");      // add if absent, remove if present\ntotalEl.hidden = false;                     // show or hide\nlist.dataset.month = \"2026-10\";             // sets data-month=\"2026-10\"
\n

textContent تضبط نصًا عاديًا. وفضّل الأصناف (classes) على ضبط style مباشرة: فملف CSS يقرّر شكل .over-budget، وJavaScript تقرّر فقط هل يحمل العنصر هذا الصنف. وعندها يستطيع المصمّمون تغيير الشكل دون أن يمسّوا منطقك.

\n\n

إنشاء العناصر وعرض قائمة

\n

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

\n
app.js
const li = document.createElement(\"li\");\nli.textContent = \"Coffee: $4.50\";\nli.dataset.id = \"exp-1\";\nlist.append(li);
\n

createElement تصنع عنصرًا ليس على الصفحة بعد. وappend تُلحقه ابنًا أخيرًا لـ list، وعندها فقط يظهر. أما element.remove() فتُزيل عنصرًا من الصفحة.

\n

لدى Pocket مصفوفة مصاريف ويحتاج إلى <li> لكل مصروف. وأنظف طريقة لإبقاء الصفحة والبيانات متّفقتين هي دالة render (دالة العرض): تُفرغ الحاوية، ثم تعيد بناءها من البيانات، في كل مرة تتغيّر فيها البيانات.

\n
app.js
function renderExpenses(expenses) {\n  list.replaceChildren(); // remove the old items\n  for (const expense of expenses) {\n    const li = document.createElement(\"li\");\n    li.textContent = `${expense.label}: ${formatMoney(expense.amount)}`;\n    li.dataset.id = expense.id;\n    if (expense.amount >= 10000) {\n      li.classList.add(\"big\");\n    }\n    list.append(li);\n  }\n  const total = expenses.reduce((sum, e) => sum + e.amount, 0);\n  totalEl.textContent = `Total: ${formatMoney(total)}`;\n}
\n

إعادة بناء كل شيء تبدو هدرًا، وهي كذلك مع آلاف العناصر. لكن مع عشرات العناصر في تطبيق شخصي، فهي سريعة، والأهم أنها بسيطة: هناك دالة واحدة فقط تقرّر شكل القائمة، ولا يمكن للصفحة أن تخرج عن تزامنها مع البيانات. وهذه الفكرة، أن الشاشة دالةٌ في البيانات، هي جوهر أطر العمل مثل React، التي تفعل الشيء نفسه بذكاء أكبر.

\n

والقاعدة التي تجعل هذا ينجح هي الانضباط في الاتجاه. البيانات تسير في اتجاه واحد: غيّر المصفوفة، ثم استدعِ renderExpenses. لا تُصلح عنصر <li> واحدًا يدويًا “هذه المرة فقط”، ولا تقرأ المصاريف من الصفحة لتحسب شيئًا؛ فالصفحة صورة للبيانات، لا البيانات نفسها. وفي اللحظة التي يصبح فيها مكانان قادرين على تغيير ما على الشاشة، سيختلفان حتمًا في يوم ما.

\n\n

صارت الصفحة تعرض بيانات Pocket، لكنها لا تستطيع التفاعل مع المستخدم بعد. الدرس التالي: الأحداث.

\n","toc":[{"id":"sec-1","text":"الـ DOM: الصفحة على شكل كائنات","level":2},{"id":"sec-2","text":"تحديد العناصر","level":2},{"id":"sec-3","text":"تغيير ما هو موجود","level":2},{"id":"sec-4","text":"إنشاء العناصر وعرض قائمة","level":2}],"takeaways":["يحوّل المتصفّح كود HTML إلى الـ DOM، وهو شجرة من الكائنات؛ وتغيير هذه الكائنات بـ JavaScript يغيّر الصفحة فورًا.","querySelector تُرجع أول عنصر يطابق محدّد CSS، أو null؛ وquerySelectorAll تُرجع كل العناصر المطابقة.","اضبط النص باستخدام textContent لا innerHTML كلما جاء المحتوى من البيانات أو من المستخدمين، كي لا يُنفَّذ أبدًا على أنه HTML.","غيّر المظهر عبر classList، واترك لـ CSS أن تقرّر شكل هذه الأصناف.","دالة render تُفرغ الحاوية وتعيد بناءها من بياناتك تُبقي الصفحة والبيانات متزامنتين."],"further":[{"title":"Introduction to the DOM (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction"},{"title":"Document.querySelector() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector"},{"title":"Element.classList (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Element/classList"}],"quiz":[{"q":"

السطر document.querySelector("#totl").textContent = "$0.00"; يرمي TypeError: Cannot set properties of null. ما السبب الأرجح؟

","options":[{"text":"المحدّد لم يطابق شيئًا، فأرجعت querySelector القيمة null.","why":"صحيح. خطأ إملائي في الـ id (totl)، أو تشغيل السكربت قبل وجود العنصر، كلاهما يُنتج null."},{"text":"لا يمكن ضبط textContent على الفقرات.","why":"يمكن ضبط textContent على أي عنصر. والخطأ يقول إن ما قبل .textContent كان null."},{"text":"يجب إعادة تحميل الصفحة بعد تغيير الـ DOM.","why":"تغييرات الـ DOM تظهر فورًا. لا حاجة إلى إعادة التحميل ولا رغبة فيها."}],"answer":0},{"q":"

يكتب مستخدم <img src=x onerror=alert(1)> تسميةً لمصروف. أيّ سطر يعرضها بأمان؟

","options":[{"text":"li.innerHTML = label;","why":"innerHTML تحلّل النص على أنه HTML، فيُنشأ وسم الصورة ويُنفَّذ كود onerror. وهذه ثغرة XSS."},{"text":"li.textContent = label;","why":"صحيح. textContent تُدرج نصًا عاديًا، فيرى المستخدم الحروف التي كتبها ولا يُنفَّذ شيء."},{"text":"li.innerHTML = `<span>${label}</span>`;","why":"وضع التسمية داخل template literal ما زال يرسلها إلى محلّل HTML. والوسم الذي بداخلها يُنشأ مع ذلك."}],"answer":1},{"q":"

دالة render لديك تضيف <li> لكل مصروف. بعد إضافة مصروف رابع واستدعاء render مجددًا، تعرض القائمة سبعة عناصر. ما الناقص؟

","options":[{"text":"إفراغ القائمة قبل إعادة بنائها، مثلًا باستخدام list.replaceChildren().","why":"صحيح. دون الإفراغ، يضيف كل عرض نسخة كاملة جديدة بعد العناصر القديمة."},{"text":"استدعاء querySelectorAll بدلًا من querySelector.","why":"الحاوية عنصر واحد، لذلك querySelector صحيحة. المشكلة أن الأبناء القدامى لا يُزالون أبدًا."},{"text":"const بدلًا من let لمصفوفة المصاريف.","why":"طريقة التصريح بالمصفوفة لا تؤثّر في الـ DOM. والتكرار يأتي من عدم إزالة العناصر السابقة أبدًا."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"

Pocket

\n

Total: $0.00

\n\n","css":".big { font-weight: 700; color: #b42318; }\n","js":"const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450 },\n { id: \"exp-2\", label: \"Flight\", amount: 18900 },\n { id: \"exp-3\", label: \"Lunch\", amount: 1350 },\n];\n\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\nfunction renderExpenses(expenses) {\n // 1. Clear #expense-list\n // 2. Add one
  • per expense: \"Coffee: $4.50\", with data-id set to its id,\n // and the class \"big\" when the amount is 10000 or more\n // 3. Set #total to \"Total: $207.00\" (the sum, formatted)\n}\n\nrenderExpenses(expenses);\n"},"solution":{"html":"

    Pocket

    \n

    Total: $0.00

    \n\n","css":".big { font-weight: 700; color: #b42318; }\n","js":"const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450 },\n { id: \"exp-2\", label: \"Flight\", amount: 18900 },\n { id: \"exp-3\", label: \"Lunch\", amount: 1350 },\n];\n\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\nconst list = document.querySelector(\"#expense-list\");\nconst totalEl = document.querySelector(\"#total\");\n\nfunction renderExpenses(expenses) {\n list.replaceChildren();\n for (const expense of expenses) {\n const li = document.createElement(\"li\");\n li.textContent = `${expense.label}: ${formatMoney(expense.amount)}`;\n li.dataset.id = expense.id;\n if (expense.amount >= 10000) {\n li.classList.add(\"big\");\n }\n list.append(li);\n }\n const total = expenses.reduce((sum, e) => sum + e.amount, 0);\n totalEl.textContent = `Total: ${formatMoney(total)}`;\n}\n\nrenderExpenses(expenses);\n"},"checks":[{"id":"items","test":"const items = $$('#expense-list li');\nreturn items.length === 3 && items[0].textContent.trim() === 'Coffee: $4.50' && items[2].textContent.trim() === 'Lunch: $13.50';\n"},{"id":"data-id","test":"return $$('#expense-list li').map((li) => li.dataset.id).join() === 'exp-1,exp-2,exp-3';\n"},{"id":"big-class","test":"const items = $$('#expense-list li');\nreturn items.length === 3 && items[1].classList.contains('big') && !items[0].classList.contains('big') && !items[2].classList.contains('big');\n"},{"id":"total","test":"return text('#total') === 'Total: $207.00';\n"},{"id":"rerender","test":"renderExpenses([{ id: 'x', label: 'Tea', amount: 300 }]);\nconst items = $$('#expense-list li');\nreturn items.length === 1 && items[0].textContent.trim() === 'Tea: $3.00' && !$('#expense-list b') && text('#total') === 'Total: $3.00';\n"}],"title":"اعرض قائمة Pocket","prompt":"

    اكتب جسم الدالة renderExpenses(expenses) بحيث تعيد بناء الصفحة من البيانات:

    \n
      \n
    1. أفرغ #expense-list.
      2. \n
    2. أضف <li> لكل مصروف نصّه مثل Coffee: $4.50 (التسمية، ثم نقطتان، ثم المبلغ منسّقًا)، واضبط data-id الخاص به على id المصروف، وأضف الصنف big حين يكون المبلغ 10000 سنت أو أكثر.
      3. \n
    3. اضبط #total على Total: متبوعًا بالمجموع منسّقًا.
      4. \n
    \n

    يجب أن يستبدل استدعاء renderExpenses مرة أخرى القائمة لا أن يضيف إليها، ويجب أن تُعرض التسميات نصًا عاديًا.

    \n","hints":["حدّد الحاويتين مرة واحدة في الأعلى: document.querySelector("#expense-list") وdocument.querySelector("#total").","لكل مصروف: document.createElement("li")، ثم اضبط textContent، ثم li.dataset.id، وربما li.classList.add("big")، ثم list.append(li).","ابدأ الدالة بـ list.replaceChildren(); كي لا يكرّر العرض الثاني العناصر، واحسب المجموع باستخدام reduce."],"explanation":"

    دالة render هي المكان الوحيد الذي يقرّر شكل القائمة. والإفراغ أولًا بـ replaceChildren() يعني أن استدعاءها مجددًا، بعد تغيّر البيانات، يُنتج عنصرًا واحدًا بالضبط لكل مصروف بدلًا من إضافة نسخ مكرّرة. وتُدرج textContent التسمية نصًا عاديًا، فتُعرض تسمية مثل <b>Tea</b> حرفيًا بدلًا من أن تصبح عريضة (أو، مع مدخلات أخبث، أن تشغّل كودًا). والصنف big يكتفي بتمييز العنصر؛ أما ملف الأنماط فيقرّر شكل العناصر المميّزة. وdataset.id تكتب سمة data-id ستستخدمها في الدرس التالي لتعرف إلى أيّ مصروف تعود النقرة.

    \n","checkLabels":{"items":"عنصر
  • واحد لكل مصروف، مثل “Coffee: $4.50”","data-id":"كل عنصر يحمل معرّف مصروفه في data-id","big-class":"المصاريف التي قيمتها 10000 سنت أو أكثر فقط تحصل على الصنف “big”","total":"يعرض #total النص “Total: $207.00”","rerender":"العرض مجددًا يستبدل القائمة ويعرض التسميات نصًا عاديًا"}},"words":580,"readMinutes":3}