قائمة نقاط جافا سكربت هتمل دوم
- الصفحة السابقة مجموعة DOM
- الصفحة التالية JS Window
م物体 NodeList HTML DOM
NodeList هي مجموعة من العقد المستخرجة من المستند
الNodeList مشابهة جدًا لـ HTMLCollection.
إذا كنت تستخدم getElementsByClassName()
يستعيد هذا الطريقة NodeList بدلاً من HTMLCollection في بعض المتصفحات القديمة.
جميع المتصفحات ستعود childNodes
الخصائص NodeList.
معظم المتصفحات ستعود querySelectorAll()
يستعيد هذا الطريقة NodeList.
الخطوط التالية تختار جميع العقد <p> في المستند:
مثال
var myNodeList = document.querySelectorAll("p");
يمكن الوصول إلى العناصر في NodeList عبر الرقم المرجعي
للوصول إلى العقد الثاني <p>، يمكنك كتابة:
y = myNodeList[1];
التعليقات:السلسلة تبدأ من 0
طول قائمة DOM Node List HTML
length
الخصائص تعرف عدد العقد في قائمة العقد
مثال
var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;
توضيح المثال:
- إنشاء قائمة لجميع عناصر <p>
- عرض طول القائمة
length
الخصائص مفيدة عند تمرير العقد في قائمة العقد
مثال
تغيير لون الخلفية لجميع عناصر <p> في قائمة العقد
var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i < myNodelist.length; i++) { myNodelist[i].style.backgroundColor = "red"; }
تجربة شخصية
الفرق بين HTMLCollection و NodeList
HTMLCollection (في الفصل السابق) هي مجموعة من العناصر HTML.
NodeList هي مجموعة من عناصر الوثيقة.
HTMLCollection و NodeList هي قوائم (مجموعات) من العناصر التي تشبه القوائم (المجموعات).
لديها جميعها عدد العناصر في القائمة (المجموعة) المحددة. length
الخصائص.
يمكنها الوصول إلى كل مشروع منها مثل قائمة (0، 1، 2، 3، 4، ...) كما لو كانت قائمة.
يمكن الوصول إلى مشاريع HTMLCollection من خلال أسمائها أو id أو أرقامها.
يمكن الوصول إلى مشاريع NodeList فقط من خلال أرقامها.
يمكن أن تحتوي NodeList فقط على عناصر العقد والنصوص.
قائمة العناصر ليست قائمة!
يبدو قائمة العناصر مثل قائمة، لكنها ليست كذلك.
يمكنك التمرير عبر قائمة العناصر ومراجعة عناصرها كما لو كانت قائمة.
لكن، لا يمكنك استخدام طرق قائمة الأرقام على قائمة العناصر، مثل valueOf()
،push()
،pop()
أو join()
.
- الصفحة السابقة مجموعة DOM
- الصفحة التالية JS Window