جاري التحميل...

تعديل HTML

ورقة العبّارة الموجودة في الصفحة تسمّي القارب Gull، والوقت 09:10، والملاحظة Boarding. تعديل HTML يعني أن تكتب محتوى جديدًا داخل عنصر تمسكه أصلًا. boat.textContent = "Heron" يخزّن الكلمات Heron كما هي. note.textContent = "<em>Late</em>" يُظهر هذه المحارف، وnote.querySelector("em") يساوي null. note.innerHTML = "<em>Late</em>" يبني عنصر em نصه Late. بعد ذلك note.textContent هو Late، بينما note.innerHTML ما زال يحمل الوسوم. كتابة ثانية، note.innerHTML = "Dock 2"، تحذف em. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") تبقي Dock 2 وتضيف gate B، فتصير الملاحظة Dock 2 gate B. لا شيء يسند قيمة للوقت، فيبقى 09:10.

كتابة، لا بحث جديد

الصفحة السابقة قارنت طرق العثور على عقدة. هذه الصفحة لا تعدّ مجموعة، ولا تقرأ فهرسًا، ولا تسير عبر parentElement. getElementById يسلّمك الورقة فقط. الدرس هو القيمة التي تسندها.

ماذا تترك كل كتابة على الملاحظة

تبدأ الملاحظة بـ Boarding. اقرأ الصفوف بالترتيب. كل إسناد يستبدل الملاحظة أو يمدّها.

📊 ماذا تترك كل كتابة على الملاحظة

الكتابة ما تراه ما يبقى الخلط السهل
textContent = "Heron" على القارب Heron عقدة نص واحدة عنصر اسمه Heron
textContent = "<em>Late</em>" محارف <em>Late</em> لا عنصر em عنصر em حقيقي
innerHTML = "<em>Late</em>" Late عنصر em واحد توقع الوسوم داخل textContent
innerHTML = "Dock 2" Dock 2 em زال بقاء em بجانب Dock 2
insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 gate B Dock 2 زائد span innerHTML الذي يسقط Dock 2

textContent يخزّن سلسلة ولا يفسّر الوسوم. innerHTML يفسّر الوسوم ويسقط كل ابن كان في العنصر. insertAdjacentHTML يفسّر الوسوم أيضًا، لكن beforeend يضع العقد الجديدة بعد المحتوى الحالي. اسم قارب يُكتب عند النافذة مكانه textContent. السلسلة نفسها في innerHTML تعامل علامة أصغر-من على أنها وسم.

اقرأ الورقة قبل أن تكتب

يفتح الملف بثلاث قيم. لم يُسنَد شيء بعد.

قراءة الورقة

javascript 
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);

السجلات هي Gull و09:10 وBoarding. الوقت فقرة مستقلة. الكتابات اللاحقة لا تلمس when.

الكلمات تبقى كلمات

textContent يستبدل كل الأبناء بعقدة نص واحدة. المحارف التي تشبه وسمًا تبقى محارف.

كلمات عادية

javascript 
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));

السطر الأول Heron. الثاني محارف <em>Late</em>. الثالث null. الملاحظة تعرض الوسم كنص ولم تبنِ عنصرًا.

innerHTML يبني العنصر

سلّم المحارف نفسها إلى innerHTML. المحلّل يحوّل السلسلة إلى عقد ويستبدل ما كان في الملاحظة.

وسم محلَّل

javascript 
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);

السطر الأول Late. الثاني <em>Late</em> لأن innerHTML يعيد الترميز ومعه الوسوم. الثالث false: عنصر em موجود فهو ليس null. الكلمات الظاهرة وسلسلة الترميز قراءتان مختلفتان لعنصر واحد.

إسناد innerHTML التالي يمسح em

قيمة innerHTML جديدة تستبدل الملاحظة كلها. em لا يبقى بجانب النص الجديد.

استبدال ثان

javascript 
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));

السطر الأول Dock 2. الثاني null. Boarding زال من قبل. هذه الكتابة تأخذ em أيضًا.

أضف gate B وأبقِ Dock 2

insertAdjacentHTML("beforeend", ...) يحلّل قطعة ويضعها في النهاية. هذه السلسلة تبدأ بمسافة حتى تبقى العبارتان كلمتين. هناك مواضع أخرى. هذه الصفحة تستعمل beforeend فقط.

إضافة في النهاية

javascript 
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);

السطر الأول Dock 2 gate B. الثاني gate B. Dock 2 ما زال في الملاحظة. إسناد سلسلة الـ span نفسها عبر innerHTML كان سيحذف Dock 2.

سطر تحت الورقة

السكربت في آخر body، بعد وجود الورقة. يحفظ كلمة Late قبل أن يحل Dock 2 محل em، ثم يكتب سطرًا من اسم القارب وتلك الكلمة المحفوظة والملاحظة بعد إضافة gate B.

عرض الصفحة — ورقة الرصيف

html 
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>

يقرأ السطر Heron / Late / Dock 2 gate B. الوقت ما زال 09:10. Late على السطر هي الكلمة المحفوظة قبل المسح. الملاحظة نفسها لم تعد تقول Late. الصفحة التالية تغيّر CSS على عناصر كهذه، ولا تضيف طريقة جديدة لالتقاطها.

افحص الورقة

  1. سجّل النصوص الثلاثة الأولى وتوقّع Gull و09:10 وBoarding
  2. اجعل القارب Heron والملاحظة محارف em، ثم توقّع تلك السلسلة وem بقيمة null
  3. اجعل innerHTML سلسلة em، ثم توقّع textContent بقيمة Late وinnerHTML ما زال يحمل الوسوم وem ليس null
  4. اجعل innerHTML القيمة Dock 2 وتوقّع أن em يساوي null
  5. أضف span عبر beforeend وتوقّع Dock 2 gate B ثم نص span وهو gate B
  6. اقرأ السطر وتوقّع Heron / Late / Dock 2 gate B، واقرأ الوقت وتوقّع 09:10

زلّات هذه الورقة

الصفحة تظل تفتح. الإسناد كتب نوع القيمة الخطأ.

  • وضع اسم كُتب عند النافذة في innerHTML، حيث يصير < وسمًا
  • توقع أن textContent = "<em>Late</em>" ينشئ em
  • قراءة textContent بعد كتابة em وتوقع الوسوم في تلك السلسلة
  • إسناد innerHTML مرة أخرى وتوقع بقاء em
  • إضافة gate B عبر innerHTML وفقدان Dock 2
  • إسقاط المسافة الأولى فيصير النص Dock 2gate B
  • ضبط style هنا؛ الصفحة التالية تغيّر CSS
  • استدعاء createElement هنا؛ صفحة لاحقة تبني عقدًا جديدة

خذ هذا معك

  • textContent يكتب نصًا عاديًا ولا يفسّر الوسوم
  • innerHTML يفسّر الوسوم ويستبدل كل ابن
  • بعد كتابة em يكون textContent هو Late وinnerHTML ما زال يحوي الوسوم
  • إسناد innerHTML ثانٍ يحذف em
  • insertAdjacentHTML("beforeend", ...) يضيف ترميزًا ويبقي Dock 2
  • يبقى الوقت 09:10 لأن لا شيء يسند إليه
  • يقرأ السطر Heron / Late / Dock 2 gate B

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 46 من 47
Javascript درس تعليمي