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

اختيار العناصر

على رف المخبز عنوان واحد وثلاث ورقات. العنوان يقول Rye. الورقات تكتب الوردية: Morning وNoon وEvening. الورقة الأخيرة تحمل الصنف sold أيضًا. الرف نفسه main ومعرفه shelf. داخله h2 بمعرف loaf، ثم ثلاثة عناصر p من الصنف tag. الاختيار يعني أن تطلب من المستند الحي هذه العقد بالاسم الذي تختاره. document.getElementById("loaf") يعيد العنوان ونصه Rye. document.getElementsByClassName("tag") يعيد قائمة حية طولها 3. document.querySelector(".tag") يعيد أول ورقة، أي Morning. document.querySelectorAll(".tag") يعيد قائمة ثابتة، والمنزل 1 هو Noon. الاسم الذي لا يكتبه الرف يأتي null من querySelector، وقائمة طولها 0 من querySelectorAll.

خمسة نداءات، لا نزول في الشجرة

صفحة DOM سمّت أب العنوان وعدّت أبناء العناصر مقابل كل العقد. هنا لا تُقرأ parentElement ولا nextElementSibling ولا children، ولا يُستدعى Math. الشجرة موجودة من قبل. هذه الصفحة تفرّق بين النداء الذي يعيد عقدة واحدة، والنداء الذي يعيد قائمة، والجواب الذي يعني أن لا شيء طابق.

ماذا يعيد كل نداء

عدّ على الرف الذي فيه العنوان والورقات الثلاث فقط. ملف القراءة في الأسفل يضيف فقرة أخرى، فيختلف عدّ عناصر p هناك.

📊 ماذا يعيد كل نداء

النداء ماذا يعود على هذا الرف الخلط السهل
getElementById("loaf") عنصر واحد، أو null نص العنوان Rye قائمة تحتاج إلى منزل
getElementsByClassName("tag") HTMLCollection حي الطول 3 كتابة النقطة، مثل .tag
getElementsByTagName("p") HTMLCollection حي الطول 3 العنوان نفسه، وهو h2
querySelector(".tag") أول تطابق، أو null الورقة Morning كل الورقات
querySelectorAll(".tag") NodeList ثابت الطول 3؛ المنزل 1 هو Noon قائمة حية
querySelectorAll(".oven") NodeList فارغ الطول 0 null

دالة الصنف ومحدد CSS لا يكتبان النقطة بالطريقة نفسها. getElementsByClassName("tag") يريد الاسم العاري tag. getElementsByClassName(".tag") يبحث عن صنف اسمه حرفيًا .tag ويعيد الطول 0. querySelector يريد صيغة CSS، فتبقى النقطة على .tag. querySelector("tag") يبحث عن عنصر اسم وسمه tag، فلا يجد شيئًا ويعيد null. المنزل 0 هو الورقة الأولى. المنزل 1 هو Noon. القائمة من getElementsByClassName حية: إذا أضافت صفحة لاحقة ورقة tag أخرى يكبر الطول. querySelectorAll يُبقي الطول الذي كان لحظة النداء. Evening يحمل صنفين، tag وsold، فهو داخل قائمة الطول 3 وهو أيضًا التطابق الوحيد لـ sold.

معرف واحد، عنصر واحد

المعرف يُفترض أن يكون فريدًا في الصفحة. getElementById يعيد ذلك العنصر الواحد، أو null إذا غاب المعرف. لا يعيد قائمة، وهو موجود على document فقط لا على العنصر.

معرف واحد

javascript 
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);

السطر الأول Rye. السطر الثاني false، لأن العنوان موجود على الرف. لو اشترك عنصران في المعرف loaf، يبقى النداء معيدًا أول عنصر في المستند فقط.

اسم الصنف واسم الوسم

النداءان يعيدان HTMLCollection حيًا. اقرأ length قبل أن تأخذ ورقة واحدة. العدّ على رف العناصر الأربعة، لا على ملف القراءة.

الصنف والوسم

javascript 
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);

النتيجة 3 ثم 3 ثم 1. ثلاث ورقات تشترك في tag. الثلاث عناصر p، والعنوان h2، فيتطابق عدّ الوسم مع عدّ الصنف على هذا الرف. Evening وحده يحمل sold. getElementsByClassName(".tag") نداء آخر: النقطة ليست جزءًا من اسم الصنف، لذلك الطول 0.

أول تطابق في CSS

querySelector يعيد عنصرًا واحدًا، الأول بترتيب المستند، أو null.

أول تطابق

javascript 
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);

السطر الأول Morning. السطر الثاني Evening. العبارة #shelf .sold تعني عنصرًا من صنف sold داخل الرف، لا الرف نفسه. document.getElementById("shelf").querySelector(".sold") يبدأ البحث من الرف ويصل إلى ورقة Evening نفسها.

كل التطابقات، ثم المنزل

querySelectorAll يعيد كل التطابقات في NodeList ثابت. القائمة قد تكون فارغة. هي ليست null.

كل التطابقات

javascript 
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);

الطول 3. المنزل 1 هو Noon. المنزل 0 هو Morning، والمنزل 2 هو Evening. هذه القائمة لا تكبر إذا أضاف سكربت لاحق ورقة. HTMLCollection الآتي من getElementsByClassName("tag") يكبر. واحدة لقطة، والأخرى تبقى حية.

اسم لم يكتبه الرف

اطلب معرفًا وصنفًا غير موجودين في الملف.

لا شيء طابق

javascript 
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);

السطر الأول null. السطر الثاني null. السطر الثالث 0. querySelectorAll ما زال يعيد قائمة حين لا يطابق شيء، فتقرأ الطول 0، والقائمة نفسها ليست null. getElementById ليس لديه قائمة يعيدها، فالغياب null وليس 0.

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

فقرة تخبر كم ورقة tag موجودة، وما أول ورقة، وما ورقة sold. السكربت في نهاية body، بعد وجود العناصر. سطر الفقرة بلا صنف tag، فهو ليس واحدًا من الثلاثة.

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

html 
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>

الفقرة تكتب 3 / Morning / Evening. في هذا الملف يعدّ getElementsByTagName("p") الرقم 4، لأن السطر p إضافي. querySelectorAll(".tag") يبقى 3. الصفحة التالية تغيّر HTML العناصر التي وجدتها هذه النداءات.

افحص الرف

  1. سجّل نص العنوان وتوقع Rye، ثم فحص null وتوقع false
  2. سجّل طول الصنف وطول p وطول sold: 3 ثم 3 ثم 1
  3. سجّل نص أول .tag وتوقع Morning، ثم #shelf .sold وتوقع Evening
  4. سجّل طول querySelectorAll وتوقع 3، ثم المنزل 1 وتوقع Noon
  5. سجّل المعرف الغائب وquerySelector الغائب وتوقع null في المرتين
  6. سجّل querySelectorAll(".oven").length وتوقع 0
  7. اقرأ الفقرة وتوقع 3 / Morning / Evening

النداء الخطأ

الصفحة تبقى مفتوحة. النداء الذي كتبته طلب شيئًا آخر.

  • تمرير .tag إلى getElementsByClassName، والنقطة مكانها محدد CSS فقط
  • تمرير tag بلا نقطة إلى querySelector وتوقع الورقات
  • قراءة المنزل 1 على أنه الورقة الأولى
  • معاملة غياب querySelectorAll كأنه null بدل الطول 0
  • معاملة غياب getElementById كأنه قائمة طولها 0
  • عدّ getElementsByTagName("p") في ملف القراءة وتوقع 3
  • استدعاء .map على HTMLCollection؛ هو ليس مصفوفة
  • قراءة parentElement في هذه الصفحة؛ ذلك كان في صفحة الشجرة

خذ معك هذا

  • getElementById يعيد عنصرًا واحدًا، أو null
  • getElementsByClassName وgetElementsByTagName يعيدان HTMLCollection حيًا
  • دالة الصنف تريد tag لا .tag
  • querySelector يعيد أول تطابق CSS، أو null
  • querySelectorAll يعيد NodeList ثابتًا؛ والغياب طوله 0
  • المنزل 0 هو Morning والمنزل 1 هو Noon
  • الصفحة التالية تغيّر HTML عناصر سبق أن اخترتها

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

جاهز للبدء

اختبر معرفتك

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

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

📝 التعليمات

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