دليل NodeList DOM HTML

قائمة النodos

NodeList هو مجموعة من عناصر النود مثل قائمة (السلسلة).

يمكن الوصول إلى العناصر في NodeList باستخدام الرقم الايمي (تبدأ من 0).

سمة طوليعود عدد العناصر في NodeList.

NodeList مقابل HTMLCollection

NodeList مقابل HTMLCollection مماثلة تقريباً.

يرجى الرجوع إلى الشرح أدناه.

من يرجع NodeList؟

خصائص childNodes

طريقة querySelectorAll()

طريقة getElementsByName()

المزايا والمتغيرات

يمكن استخدام المزايا التالية على NodeList: 

الاسم الوصف
entries() يعود الم迭代ر الذي يحتوي على زوجات المفاتيح/القيم.
forEach() أ�行ار للدالة المراجعة لكل عنصر في القائمة.
item() يعود العنصر في الموقع المحدد.
keys() استخدم الأماكن في القائمة لتحويل الم迭代ر.
length يعود عدد العناصر في NodeList.
values() استخدم القيم في القائمة لتحويل الم迭代ر.

النماذج

اختر جميع <p> العنصر:

const myNodeList = document.querySelectorAll("p");

يمكن الوصول إلى العناصر في NodeList باستخدام الرقم الايمي.

للوصول إلى العنصر الثاني <p>، يمكنك كتابة:

myNodeList[1]

جربها بنفسك

ملاحظة:السلسلة تبدأ من 0.

طول قائمة العناصر DOM HTML

length الخصائص تعرف عدد العناصر في قائمة العناصر:

مثال 1

myNodelist.length

جربها بنفسك

عندما تريد مرور جميع العناصر في قائمة العناصر،length الخصائص مفيدة جداً:

مثال 2

تغيير لون كل عناصر <p> في قائمة العناصر: 

const myNodelist = document.querySelectorAll("p");
لـيـت i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

جربها بنفسك

ليست مجموعة

قائمة النodos ليست مجموعة!

يبدو قائمة النodos كأنها مجموعة، لكن هذا ليس صحيحًا.

يمكنك مرورًا على قائمة النodos واستخدام الإشارة إلى العقد.

لكن لا يمكنك استخدام طرق المجموعات مثل push() أو pop() أو join() على قائمة النodos.

الفرق بين مجموعة الحقول وقائمة النodos

قائمة النodos مع مجموعة الحقول مماثلة جدًا.

كل منهما هو مجموعة مشابهة لعدد من العناصر (العقد) المستخرجة من الوثيقة (العناصر). يمكن الوصول إلى العقد عن طريق أرقامها. تبدأ الأرقام من 0.

كل منهما سمة طول، وتستعيد عدد العناصر (المجموعات) في القائمة (المجموعة).

مجموعة الحقول هيعنصر الوثيقةالمجموعة.

قائمة النodos هيعقد الوثيقةمجموعة من العناصر (العقدة العنصرية، العقدة الخصوصية، والعقد النصية).

يمكن الوصول إلى مشاريع مجموعة الحقول من خلال أسمائها أو id أو أرقامها.

عناصر قائمة النodos يمكن الوصول إليها فقط من خلال أرقامها.

مجموعة الحقول دائمًا نوعًا منالحاليةالمجموعة. على سبيل المثال: إذا تم إضافة عنصر <li> إلى قائمة DOM، فإن قائمة الحقول في مجموعة الحقول ستتغير أيضًا.

غالبًا ما تكون قائمة النodos نوعًا منثابتالمجموعة. على سبيل المثال: إذا تم إضافة عنصر <li> إلى قائمة DOM، فإن قائمة النodos في المجموعة لن تتغير.

getElementsByClassName() و getElementsByTagName() يستعيد هذا النوع من الطريقة مجموعة الحقول الحالية.

querySelectorAll() يستعيد هذا النوع من الطريقة قائمة النodos الثابتة.

childNodes ستستعيد هذا النوع من الطريقة قائمة النodos الحالية.

قائمة العقد الحالية

في بعض الحالات، تكون قائمة النodosالحالية：ستتم تحديث قائمة النodos عند إجراء تغييرات في DOM.

childNodes يستعيد هذا النوع من الطريقة قائمة النodos الحالية.