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

نموذج DOM في HTML

ملف HTML على القرص يحفظ المحارف فقط. المتصفح يبني من هذا الملف شجرة حية، وهذه الشجرة هي DOM. على زجاج المحطة سطران: العنوان Market والملاحظة Stand clear. الصفحة المفتوحة معها document جاهز. new document() يرمي خطأ، وnew Document() مستند فارغ وليس هذه اللوحة.

شجرة، لا تقريب أعداد

في صفحة الكائن Math كنت تطلب عددًا من كائن مشترك. هنا لا تقرّب عرضًا ولا تبني لحظة بـ new Date. تنزل من document: عنصر html، ثم head بجانب body، ثم العنوان بجانب الملاحظة. اختيار العناصر بأكثر من طريقة، وتغيير الوسوم، وإنشاء عقد جديدة، تأتي لاحقًا. هذه الصفحة تتعلم شكل الشجرة وتقرأ عقدتين.

مكان كل قطعة على اللوحة

كل صف مكان تشير إليه. العمود الأخير هو الخلط الذي يأخذك إلى مكان آخر.

📊 أماكن هذه اللوحة

المكان ما في يدك على هذه اللوحة الخلط السهل
document الشجرة نفسها المدخل، بلا اسم وسم حسبانه body
document.documentElement عنصر html الوسم HTML حسبانه العنوان
document.head عنصر head شقيق body البحث عن Market هنا
document.body عنصر body أب العنوان حسبانه عقدة نص
h1#stop عنصر العنوان النص Market الملف المحفوظ على القرص
النص داخل العنوان محارف فقط الكلمة Market عنصر يملك id

العنوان والملاحظة ابنا body من العناصر، فهما شقيقان. كلمة Market ليست شقيقة الملاحظة. هي نص داخل العنوان. tagName يرجع حروفًا كبيرة، لذلك عنصر html يقول HTML. عقدة document بلا وسم وبلا عنصر أب.

ثلاثة أسماء في أعلى الشجرة

هذه الخصائص الثلاث تسمي العناصر الخارجية. لا أحد منها هو العنوان على الزجاج.

العناصر الخارجية

javascript 
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);

الأسطر الثلاثة هي HTML ثم HEAD ثم BODY. head وbody كلاهما ابن عنصر html، فهما شقيقان. Market ليست في head. عنوان التبويب في head سلسلة أخرى غير عنوان الزجاج.

عائلة العنوان

stop مقبض عنصر العنوان. أبوه العنصري هو body. الشقيق العنصري التالي هو الملاحظة.

الأب والشقيق

javascript 
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);

السطر الأول BODY. السطر الثاني note. nextElementSibling يقفز عن سطر الفاصل ويقف على الفقرة. الشقيق العنصري السابق null، لأن لا عنصر قبل العنوان داخل body.

الكلمة والمقبض

قراءة العنصر غير قراءة المحارف.

النص والمعرف

javascript 
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);

الأول Market والثاني stop. textContent هو المحارف وid هو المقبض. الملاحظة تقول Stand clear، وهذه السلسلة ليست على العنوان.

العناصر أولًا، ثم كل العقد

children يعد أبناء العناصر فقط. childNodes يعد عقد النص أيضًا، ومنها فواصل الأسطر في ملف اللوحة. شغّل هذا على body فيه العنوان والملاحظة فقط، لا على صفحة الدرس ولا على ملف العرض في الأسفل.

طولان

javascript 
console.log(document.body.children.length);
console.log(document.body.childNodes.length);

مع فاصل قبل العنوان، وفاصل بين العنصرين، وفاصل بعد الملاحظة، يكون children.length مساويًا 2 وchildNodes.length مساويًا 5. العقد الثلاث الزائدة نص وفيها فراغ فقط. إذا وضعت الوسمين في سطر واحد تختفي عقد النص ويلتقي الطولان.

اسم ليس على اللوحة

اطلب id لم يكتبه الملف.

معرف غائب

javascript 
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);

السطر الأول null. السطر الثاني false لأن stop موجود. null يعني لا عنصر، لا عنوانًا فارغًا. إسناد سلسلة جديدة إلى textContent يغيّر الشجرة الحية في المتصفح. ملف HTML على القرص ما زال يقول Market.

سطر على الصفحة

فقرة ثالثة تعرض وسم الأب ونص العنوان. السكربت في آخر body، بعد وجود تلك العناصر.

عرض الأب والعنوان

html 
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>

الفقرة تقرأ BODY / Market. في هذا الملف ثلاثة عناصر داخل body قبل السكربت، لذلك الطول 2 لا يخصه. عنصر script ابن آخر. الصفحة التالية تختار العناصر بأكثر من طريق.

افحص اللوحة

  1. اطبع أسماء الوسوم الخارجية الثلاثة وتوقع HTML ثم HEAD ثم BODY
  2. اطبع وسم أب العنوان وتوقع BODY
  3. اطبع id الشقيق التالي وتوقع note
  4. اطبع نص العنوان وتوقع Market، ثم id وتوقع stop
  5. على لوحة العنصرين، توقع طول children يساوي 2 وطول childNodes يساوي 5
  6. اطبع المعرف الغائب وتوقع null، ثم المقارنة مع stop وتوقع false
  7. اقرأ الفقرة وتوقع BODY / Market

المكان الخطأ

الصفحة تفتح، والمكان الذي سمّيته ليس مكان العنوان.

  • استدعاء new document() أو قراءة new Document() على أنه هذه اللوحة
  • البحث عن Market في document.head
  • حسبان كلمة Market شقيقًا عنصريًا للملاحظة
  • قراءة children.length حين تقصد كل العقد بما فيها فواصل الأسطر
  • قراءة childNodes.length حين تقصد العنوان والملاحظة فقط
  • قراءة null من معرف غائب كسلسلة فارغة
  • توقع أن الكتابة في textContent تغيّر الملف على القرص

أبقِ هذه منفصلة

  • document هو الشجرة وdocumentElement هو عنصر html
  • head وbody شقيقان تحت عنصر html
  • أب العنوان هو body والشقيق التالي هو الملاحظة
  • textContent محارف وid مقبض
  • children عناصر فقط وchildNodes يشمل نص الفراغ
  • المعرف الغائب null والملف المحفوظ ليس الشجرة الحية
  • الصفحة التالية تختار العناصر بأكثر من id واحد

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

جاهز للبدء

اختبر معرفتك

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

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

📝 التعليمات

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