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

إنشاء العناصر

على لوحة الفلين في المطبخ ورقة واحدة مثبّتة من قبل: milk. القائمة هي #board. تلك الورقة عنصر li معرّفه milk. الترميز في سطر واحد، فلا عقدة نص فارغة من سطر جديد.
تريد أن تضيف tea و bread و eggs. لا تبنِ الوسم من نص. document.createElement("li") يعطيك li جديدًا ليس في الصفحة بعد. parentElement يساوي null. document.body.contains يساوي false. طول children للوحة يبقى 1، لأن milk وحده هناك.
textContent = "tea" يكتب الكلمة على ذلك الكائن ولا يعلّقه بالصفحة.
board.append(tea) يضعه آخر القائمة. نتيجة النداء undefined. لا يُرجع العقدة. appendChild يعيد العقدة نفسها؛ هذه الصفحة تستعمل append. prepend يضع الخبز أولًا. insertBefore(eggs, milk) يضع البيض قبل milk مباشرة، لأن milk ابن اللوحة أصلًا. الترتيب: bread ثم eggs ثم milk ثم tea. طول children يصير 4.
تجربة جانبية على اللوحة الأصلية فقط: createTextNode("salt"). هذه عقدة نص، ليست li. بعد إلحاقها يبقى children مساويًا 1. childNodes يصير 2 بدل 1. nodeType يساوي 3. آخر عنصر ما زال milk. عرض الصفحة لا يُلحق الملح.
السطر تحت اللوحة: bread / eggs / milk / 4. كلمة tea في القائمة وليست في هذا السطر. الرقم 4 هو عدد العناصر. نص milk يبقى milk. لا تكتب خاصية CSS هنا.

عقد جديدة، لا طبقة لون

الصفحة السابقة كتبت style و setProperty و classList و cssText على شريحة لون. لم تنشئ عقدة. الصفحة التي قبلها غيّرت الكلمات بـ textContent و innerHTML و insertAdjacentHTML. هنا لا تسند style، ولا تحلّل سلسلة HTML، ولا تعيد كتابة كلمة milk. getElementById يعطيك اللوحة وعنصر milk فقط. الصفوف الجديدة تأتي من createElement.

أين تستقر كل عقدة

اللوحة تبدأ بعنصر li واحد: milk. اقرأ الصفوف بالترتيب. صف الملح تجربة جانبية على اللوحة الأصلية، قبل وجود tea و bread و eggs. عرض الصفحة يتوقف عند insertBefore ولا يلحق الملح.

📊 أين تستقر كل عقدة

النداء موضع العقدة الجديدة أبناء العناصر الخلط الشائع
createElement("li") لا مكان؛ parentElement هو null ما زال 1، وهو milk ظن أن العنصر ظاهر على اللوحة
textContent = "tea" ما زال بلا مكان ما زال 1 ظن أن الكلمة نفسها تُدرج li
append(tea) في الآخر؛ نتيجة النداء undefined 2: milk ثم tea انتظار أن يعيد append العقدة
prepend(bread) في الأول 3: bread ثم milk ثم tea تبديل prepend مع append
insertBefore(eggs, milk) قبل milk مباشرة 4: bread ثم eggs ثم milk ثم tea مرجع ليس ابنًا للوحة
append(createTextNode("salt")) على اللوحة الجديدة عقدة نص بعد milk، ليست li ما زال 1 صيرورة children.length إلى 2

createElement يبني العقدة في الذاكرة. اللوحة لا تتغير حتى تضعها دالة. children يعدّ عناصر فقط. عقدة النص موجودة في childNodes وليست في children. append و prepend نتيجتهما undefined. appendChild يعيد العقدة التي مرّرتها. append يقبل عقدة أو سلسلة؛ السلسلة تصبح عقدة نص. appendChild يقبل عقدة، والسلسلة ترمي خطأ. insertBefore يريد مرجعًا هو ابن ذلك الأب مسبقًا. إن مرّرت null مرجعًا، تذهب العقدة إلى الآخر، كفكرة append. هذه الصفحة تمرّر milk لا null. إلحاق عقدة موجودة أصلًا على اللوحة ينقلها ولا ينسخها.

عنصر li الجديد ليس على اللوحة بعد

الملف يفتح بالقائمة ذات السطر الواحد. لم يُنشأ شيء. القراءات الأربع تسأل العقدة الجديدة واللوحة، قبل النص وقبل أي إدراج.

عنصر منفصل

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);

النواتج: null و false و 1 وسلسلة فارغة. المتصفح يملك كائن li حقيقيًا. لا أب له. ابن العناصر الوحيد ما زال milk. كلمة milk لذلك العنصر القديم، لا للجديد.

كلمة tea لا تُدرجه بعد

textContent يستبدل النص داخل العقدة التي تمسكها. ليس دالة إدراج. قائمة أبناء اللوحة لا تكبر.

نص، ما زال منفصلًا

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);

النواتج: tea و false و 1. تقرأ الكلمة من الكائن. الصفحة ما زالت تعرض milk فقط. contains يساوي false لأن العقدة لم توضع تحت المستند.

append يضع الشاي آخرًا

append يضيف العقدة آخر ابن. المتغير fromAppend يحمل نتيجة النداء، وهي undefined لا عنصر li. بعد النداء يصير الأب هو اللوحة ونص آخر عنصر هو tea. الترتيب: milk ثم tea.

إلحاق الشاي

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);

النواتج: undefined و true و tea و 2. لو استعملت appendChild(tea) لظهرت العقدة نفسها. هذا المقطع لا ينادي appendChild. milk ما زال أول ابن عنصر.

prepend و insertBefore يضبطان الترتيب

هذا المقطع يبدأ من اللوحة الأصلية ثم يضع ثلاث عقد. prepend يعمل بعد أن صار tea أخيرًا، فيصبح bread الابن الأول. insertBefore(eggs, milk) مرجعه milk، فيجلس eggs بين bread و milk. النصوص الأربعة: bread و eggs و milk و tea.

موضع الخبز والبيض

javascript 
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);

النواتج: bread و eggs و milk و tea. طول children يساوي 4. الفهرس 1 هو eggs لا milk. انتقل milk من الفهرس 0 إلى 2 لأن عنصرين وُضعا قبله. نص milk ما زال الكلمة milk.

عقدة النص لا تدخل children

شغّل هذا المقطع على اللوحة الجديدة، القائمة الأصلية ذات السطر الواحد، لا بعد سكربت الصفحة. createTextNode يبني عقدة نص. nodeType بقيمة 3 يعني نصًا. القيمة 1 تعني عنصرًا. children يتجاهلها فيبقى الطول 1. childNodes يحسبها فيصير الطول 2 بدل 1. آخر عنصر ما زال milk. قد ترى كلمة salt في القائمة، وهي ليست li.

عقدة نص الملح

javascript 
let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);

النواتج: 3 و 1 و 2 و milk. سلسلة تُمرَّر إلى append، مثل board.append("salt")، تصبح كذلك عقدة نص لا li. عرض الصفحة في الأسفل لا يحوي هذا السطر.

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

السكربت في آخر body بعد وجود القائمة. يلحق tea، ويقدّم bread، ويدرج eggs قبل milk. لا ينشئ salt. يكتب الفهرس 0 و 1 و 2 ثم عدد العناصر. لا يكتب النص الرابع، tea.

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

html 
<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>

السطر يصير bread / eggs / milk / 4. القائمة نفسها: bread و eggs و milk و tea. السطر يتوقف عند العنصر الثالث ثم يعطي الطول، فلا تكون tea الرمز الأخير وليس الرمز الأخير كلمة. salt غائب. نص عنصر milk ما زال milk. الصفحة التالية عن الأحداث ولا تضيف طريقة أخرى لبناء هذه العقد.

افحص اللوحة

  1. أنشئ li واقرأ parentElement و document.body.contains و children.length و textContent. القيم: null و false و 1 وسلسلة فارغة.
  2. اجعل النص tea واقرأ النص و contains والطول. القيم: tea و false و 1.
  3. ألحق tea واقرأ نتيجة النداء، وهل الأب هو اللوحة، ونص آخر عنصر، والطول. القيم: undefined و true و tea و 2. ثم شغّل مقطع الترتيب واقرأ bread و eggs و milk و tea.
  4. على اللوحة الجديدة ألحق عقدة نص الملح واقرأ nodeType وطول children وطول childNodes ومعرّف آخر عنصر. القيم: 3 و 1 و 2 و milk. سطر الصفحة: bread / eggs / milk / 4.

زلات هذه اللوحة

القائمة ما زالت تُفتح بـ milk. النداء من نوع إدراج خاطئ.

  • انتظار أن يُظهر createElement("li") كلمة tea على اللوحة فورًا
  • انتظار أن يرفع textContent = "tea" طول children
  • انتظار أن يعيد append عنصر li؛ ذلك ما يفعله appendChild
  • تمرير سلسلة إلى appendChild؛ السلسلة مكانها append وهناك تصبح عقدة نص
  • استدعاء insertBefore بمرجع ليس ابنًا للوحة
  • عدّ عقدة نص الملح داخل children
  • بناء الصف الجديد بـ innerHTML؛ صفحة تغيير HTML كانت تحلّل الترميز
  • ضبط style.color هنا؛ الصفحة السابقة كتبت CSS
  • قراءة السطر كأنه bread / eggs / milk / tea
  • استدعاء remove أو cloneNode هنا؛ هذه الصفحة تضيف العناصر الثلاثة فقط

خذ معك هذا

  • createElement("li") يبني عنصرًا منفصلًا، فـ parentElement هو null وطول children يبقى 1
  • textContent = "tea" يكتب الكلمة ويبقي العقدة خارج اللوحة
  • append(tea) يضع tea آخرًا ونتيجة النداء undefined
  • prepend(bread) و insertBefore(eggs, milk) ينتجان الترتيب bread ثم eggs ثم milk ثم tea
  • createTextNode("salt") على اللوحة الجديدة يُبقي طول children عند 1 و nodeType يساوي 3
  • السطر يصير bread / eggs / milk / 4 ونص milk يبقى milk

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

جاهز للبدء

اختبر معرفتك

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

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

📝 التعليمات

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