التمييز بين مجموعات HTML وقوائم العقد ومصفوفات الكائنات في DOM

عند الوصول إلى عقد DOM، غالبًا ما يواجه المطورون مجموعات HTML وقوائم العقد ومصفوفات الكائنات. يعد فهم الاختلافات بين هياكل البيانات هذه أمرًا بالغ الأهمية لمعالجة بنية المستند بشكل فعال.

HTMLCollections vs.NodeLists

تشترك HTMLCollections وNodeLists في أوجه التشابه كمجموعات العقد، لكن لديهما أوجه تشابه خصائص مميزة:

• المحتوى: تحتوي مجموعات HTML على عنصر فقط العقد، بينما يمكن لـ NodeLists الاحتفاظ بأي نوع من العقد.
• الطرق: بالإضافة إلى الطرق الشائعة لجميع المجموعات، توفر HTMLCollections طريقة NamedItem للوصول إلى العناصر بالاسم.

مجموعات Live vs.Snapshot

يمكن أن تكون مجموعات DOM إما حية أو لقطة:

• مباشر: يتم تحديث المجموعات تلقائيًا عند إجراء تغييرات على DOM.
• لقطة: تظل المجموعات ثابتة، بغض النظر عن ذلك. تعديلات DOM.

مجموعات DOM التي يتم إرجاعها بواسطة طرق المتصفح (على سبيل المثال، getElementsByTagName) عادة ما تكون مباشرة، بينما تحديدات jQuery هي لقطات.

المصفوفات مقابل مصفوفات الكائنات بينما تظهر كائنات jQuery كمصفوفات في سجلات وحدة التحكم، فهي في الواقع مصفوفات كائنات:

المصفوفات:
• يتم الوصول إلى المجموعات المتسلسلة باستخدام الأرقام الفهارس.
مصفوفات الكائنات:
• المصفوفات التي يتم الوصول إلى العناصر فيها باستخدام كل من الخصائص الرقمية والمسماة.

اختيار العقد

استخدام المستند الطرق:

document.getElementsByTagName("td"): إرجاع مجموعة HTML لجميع عناصر td.

• document.getElementsByClassName("myRow"): إرجاع NodeList من جميع العناصر ذات "myRow" class.

استخدام jQuery:

$("td"): تحديد جميع عناصر td وإرجاع كائن jQuery، مصفوفة كائن.

مثال على البرنامج النصي

يوضح البرنامج النصي المقدم الاختلافات بين البيانات الهياكل:

console.log('[123"،abc"،321،"cba"] =[123،"abc"،321،"cba"]: يقارن arrays.

console.log('{123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321, cba:"cba"}: يقارن صفائف الكائنات مع بناء جملة الكائن.
• console.log('Node=',Node): يسجل كائن العقدة العامة، وهو عبارة عن مصفوفة كائن تمثل أنواع العقد.
• console.log('document.links=',document.links): يسجل مجموعة HTMLCollection من الروابط.
• وحدة التحكم .log('document.getElementById("myTable")=',document.getElementById("myTable")): يسجل عنصرًا واحدًا، وليس مجموعة.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): تسجيل قائمة عقدة من العناصر باستخدام "myRow" class.
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): يسجل مجموعة HTMLCollection لجميع عناصر td.
• console. log('$("#myTable")=',$("#myTable")): يسجل كائن jQuery يمثل #myTable element.
• console.log('$("td")=',$("td")): يسجل مصفوفة كائن jQuery تحتوي على جميع عناصر td.