قوائم عقدة JavaScript HTML DOM
كائن HTML DOM NodeList
الكائن عبارة NodeListعن قائمة (مجموعة) من العقد المستخرجة من مستند.
الكائن هو NodeListتقريبا نفس HTMLCollectionالشيء.
تقوم بعض المتصفحات (الأقدم) بإرجاع كائن NodeList بدلاً من HTMLCollection لأساليب مثل getElementsByClassName().
تقوم كافة المستعرضات بإرجاع كائن NodeList للخاصية childNodes.
تقوم معظم المستعرضات بإرجاع كائن NodeList للطريقة querySelectorAll().
يحدد الكود التالي جميع <p>العقد في المستند:
مثال
const myNodeList = document.querySelectorAll("p");
يمكن الوصول إلى العناصر الموجودة في NodeList بواسطة رقم فهرس.
للوصول إلى العقدة <p> الثانية يمكنك كتابة:
myNodeList[1]
ملاحظة: يبدأ الفهرس من 0.
طول قائمة عقدة HTML DOM
تحدد الخاصية عدد lengthالعقد في قائمة العقد:
مثال
myNodelist.length
تكون lengthالخاصية مفيدة عندما تريد تكرار العقد في قائمة العقد:
مثال
غيّر لون جميع عناصر <p> في قائمة العقد:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
الفرق بين HTMLCollection و NodeList
( HTMLCollectionالفصل السابق) عبارة عن مجموعة من عناصر HTML.
أ NodeListعبارة عن مجموعة من عقد المستند.
مجموعة NodeList ومجموعة HTML هي نفس الشيء إلى حد كبير.
كل من كائن HTMLCollection وكائن NodeList عبارة عن قائمة (مجموعة) من الكائنات تشبه مصفوفة.
كلاهما له خاصية length تحدد عدد العناصر في القائمة (المجموعة).
كلاهما يوفر فهرسًا (0 ، 1 ، 2 ، 3 ، 4 ، ...) للوصول إلى كل عنصر مثل المصفوفة.
يمكن الوصول إلى عناصر مجموعة HTML من خلال الاسم أو المعرف أو رقم الفهرس.
لا يمكن الوصول إلى عناصر NodeList إلا من خلال رقم الفهرس الخاص بهم.
يمكن أن يحتوي كائن NodeList فقط على عقد سمات وعقد نصية.
قائمة العقدة ليست مصفوفة!
قد تبدو قائمة العقد كمصفوفة ، لكنها ليست كذلك.
يمكنك تكرار قائمة العقد والإشارة إلى عقدها مثل المصفوفة.
ومع ذلك ، لا يمكنك استخدام أساليب الصفيف ، مثل valueOf () أو push () أو pop () أو Join () في قائمة العقد.