الدرس 25 · الوحدة 8: صفحات الويب التفاعلية

الوصول إلى عناصر الصفحة: DOM

JavaScript تمسك بعناصر الصفحة وتغيّرها أمام الزائر. ⏱ نحو 25 دقيقة.

بعد هذا الدرس ستستطيع أن:

تشرح شجرة DOM.
تختار العناصر بـ querySelector و querySelectorAll.
تغيّر النص بـ textContent و innerHTML وتعرف الفرق.
تغيّر الشكل بـ style و classList، والسمات مثل src.

١الصفحة شجرة

حين يقرأ المتصفح ملف HTML، يبني منه في الذاكرة شجرة من العناصر اسمها DOM (نموذج كائنات المستند). كل وسم «كائن» يمكن لـ JavaScript أن يقرأه ويغيّره، فتتغير الصفحة أمام الزائر دون إعادة تحميلها.

	المعنى
`document`	الصفحة كلها. منه نبدأ دائمًا.
العنصر	كل وسم في الصفحة: h1 و p و button…
الأب والأبناء	ul أب لعناصر li، و body أب لكل ما فيه، كما في الصورة.

٢اختيار عنصر: querySelector

نختار العنصر بـ محدِّدات CSS نفسها التي تعلمتها:

<h1 id="title">مقهى بُنّ</h1><p class="note">نفتح 7 صباحًا</p><script src="script.js"></script>

const title = document.querySelector("#title");const note = document.querySelector(".note"); console.log(title.textContent);console.log(note.textContent);

index.html

Console

الدالة	تُرجع
`document.querySelector("…")`	أول عنصر يطابق المحدِّد.
`document.querySelectorAll("…")`	كل العناصر المطابقة (نمر عليها بـ for...of).
`document.getElementById("title")`	العنصر بالمعرّف (طريقة قديمة شائعة، بلا #).

٣تغيير النص والمحتوى

<h1 id="title">مقهى بُنّ</h1><p id="status"></p><ul id="list"></ul><script src="script.js"></script>

const title = document.querySelector("#title");title.textContent = "مقهى بُنّ: مفتوح الآن ☕"; const offer = document.querySelector("#status");offer.innerHTML = "العرض: <b>خصم 20٪</b>"; const list = document.querySelector("#list");list.innerHTML = "<li>قهوة</li><li>شاي</li>";

index.html

Console

الخاصية	الفرق
`textContent`	نص فقط. لو كتبت فيه وسومًا تظهر كما هي. الأكثر أمانًا.
`innerHTML`	يفهم الوسوم ويبنيها. لا تضع فيه أبدًا نصًّا كتبه الزائر (ثغرة أمنية تدرسها في مقرر أمن الويب).

٤تغيير الشكل: style و classList

<p id="msg">رسالة مهمة</p><p class="box">صندوق</p><script src="script.js"></script>

.highlight {  background: #FFF3CD;  border-right: 4px solid #E07A1F;  padding: 8px;}

const msg = document.querySelector("#msg");msg.style.color = "crimson";msg.style.fontSize = "22px"; const box = document.querySelector(".box");box.classList.add("highlight");

index.html

Console

طريقتان: el.style.color لتغيير خاصية واحدة (لاحظ: font-size تُكتب fontSize)، أو الأفضل: جهّز صنفًا في CSS ثم أضفه بـ classList:

الدالة	تفعل
`classList.add("x")`	تضيف الصنف.
`classList.remove("x")`	تحذفه.
`classList.toggle("x")`	تضيفه إن لم يوجد، وتحذفه إن وُجد. مفيدة جدًّا مع الأزرار.

٥تغيير السمات

<img id="pic" src="images/coffee.svg" alt="قهوة" width="160"><a id="link" href="#">رابط</a><script src="script.js"></script>

const pic = document.querySelector("#pic");pic.src = "images/dessert.svg";pic.alt = "كعكة بالكرز"; const link = document.querySelector("#link");link.href = "https://www.tvtc.gov.sa";link.textContent = "موقع المؤسسة";

index.html

Console

الصورة في HTML قهوة، لكن JavaScript غيّرتها إلى كعكة قبل أن تراها!

توقّع وتحقّق

ما DOM؟

يبنيها المتصفح من HTML.

اختيار أول عنصر صنفه card:

محدِّد CSS.

لتغيير نص عنصر بأمان:

textContent لا يفسّر الوسوم.

إضافة الصنف إن لم يوجد وحذفه إن وُجد:

toggle.

الخلاصة

DOM شجرة عناصر الصفحة، نبدأ منها بـ document.
querySelector بمحددات CSS، و querySelectorAll لكل العناصر.
textContent للنص (آمن)، و innerHTML للوسوم (لا تضع فيه مدخلات الزائر).
classList.add/remove/toggle أفضل من style المباشر.
script في آخر body حتى توجد العناصر.

تحدٍّ برمجي: لوحة المقهى الذكية

متوسط

الصفحة جاهزة في index.html. اكتب في script.js أوامر تغيّرها دون لمس HTML.

المطلوب:

غيّر نص العنوان #title إلى: مقهى بُنّ مفتوح
أضف الصنف open (موجود في CSS) إلى العنوان.
غيّر صورة #pic إلى images/dessert.svg و alt إلى: حلى اليوم
اكتب في الفقرة #count عدد عناصر li في القائمة، مثل: الأصناف: 3

👀 اعرض شكل الناتج المطلوب

الناتج المطلوب

Console

✓ التحقق الآلي من حلّك:

نص العنوان: مقهى بُنّ مفتوح
العنوان عليه الصنف open.
الصورة صارت dessert.svg و alt: حلى اليوم.
الفقرة #count: الأصناف: 3

💡 تلميح 1

document.querySelector("#title").textContent = "…";

💡 تلميح 2

عدد العناصر: document.querySelectorAll("li").length

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<h1 id="title">مقهى بُنّ</h1><img id="pic" src="images/coffee.svg" alt="قهوة" width="150"><ul>  <li>قهوة</li>  <li>شاي</li>  <li>كيك</li></ul><p id="count"></p><script src="script.js"></script>

.open {  color: #2E8B3A;}

const title = document.querySelector("#title");title.textContent = "مقهى بُنّ مفتوح";title.classList.add("open"); const pic = document.querySelector("#pic");pic.src = "images/dessert.svg";pic.alt = "حلى اليوم"; const items = document.querySelectorAll("li");document.querySelector("#count").textContent = `الأصناف: ${items.length}`;

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس