Memahami Perbezaan antara HTMLCollections, NodeLists dan Arrays of Objects dalam DOM

Apabila bekerja dengan DOM, tiga jenis koleksi utama akan dimainkan: HTMLCollections, NodeLists, dan tatasusunan objek. Setiap koleksi ini mempunyai tujuan tertentu dan mempunyai ciri uniknya sendiri.

HTMLCollections vs. NodeLists

HTMLCollections mewakili koleksi elemen HTML yang sepadan dengan nama teg tertentu. Mereka dikembalikan oleh kaedah getElementsByTagName() objek Dokumen. HTMLCollections adalah langsung, bermakna ia secara automatik mencerminkan sebarang perubahan yang dibuat pada DOM. Ia juga menyediakan akses terus kepada elemen individu mengikut indeks.

NodeLists, sebaliknya, ialah koleksi sebarang jenis Nod (termasuk elemen HTML, nod teks dan ulasan). Mereka dikembalikan oleh pelbagai kaedah DOM, seperti querySelectorAll() dan childNodes(). NodeLists adalah statik, bermakna ia tidak menggambarkan perubahan dalam DOM melainkan dikemas kini secara eksplisit.

jQuery Objects vs. HTMLCollections and NodeLists

objek jQuery tidak berkaitan secara langsung dengan HTMLCollections atau NodeLists. Objek jQuery ialah objek JavaScript yang merangkum pilihan DOM. Ia menyediakan antara muka yang mudah untuk memanipulasi elemen DOM dan mempertingkatkan kefungsiannya menggunakan API kaya jQuery.

Pilihan jQuery boleh termasuk elemen, nod teks atau sebarang jenis Nod yang lain. Seperti NodeLists, pilihan jQuery adalah statik. Walau bagaimanapun, ia boleh ditukar kepada HTMLCollections secara langsung menggunakan kaedah $(...).live() jQuery.

JavaScript Arrays and Collections

Selain HTMLCollections dan NodeLists, anda juga boleh mencipta tatasusunan objek dalam JavaScript. Sebagai contoh, anda boleh menyimpan elemen DOM dalam tatasusunan seperti berikut:

<code class="javascript">const elements = [document.getElementById("myElement1"), document.getElementById("myElement2")];</code>

Tatasusunan dalam JavaScript adalah dinamik dan tidak menggambarkan perubahan yang dibuat pada DOM. Mereka juga tidak menyediakan akses kepada kaedah tertentu seperti HTMLCollections atau objek jQuery.

Contoh dan Demonstrasi

Skrip berikut menunjukkan perbezaan utama antara jenis koleksi ini:

<code class="javascript">$(function(){
    console.log('[123,&quot;abc&quot;,321,&quot;cba&quot;]=',[123,&quot;abc&quot;,321,&quot;cba&quot;]);
    console.log('{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;}=',{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;});
    console.log('Node=',Node);
    console.log('document.links=',document.links);
    console.log('document.getElementById(&quot;myTable&quot;)=',document.getElementById(&quot;myTable&quot;));
    console.log('document.getElementsByClassName(&quot;myRow&quot;)=',document.getElementsByClassName(&quot;myRow&quot;))
    console.log('document.getElementsByTagName(&quot;td&quot;)=',document.getElementsByTagName(&quot;td&quot;));
    console.log('$(&quot;#myTable&quot;)=',$(&quot;#myTable&quot;));
    console.log('$(&quot;td&quot;)=',$(&quot;td&quot;));
});</code>

Skrip ini mencatatkan output berikut:

[123,"abc",321,"cba"]=[123, "abc", 321, "cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= undefined
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table>
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
jQuery("#myTable")= [table#myTable]
jQuery("td")= [td, td, td, td]

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk soalan Soal Jawab Bahasa Inggeris yang sepadan dengan kandungan artikel anda: Tajuk yang lebih ringkas: * Apakah Perbezaan Antara HTMLCollections, NodeLists dan Tatasusunan Objek dalam DOM? * Koleksi DOM: HTMLCollections, NodeLists dan Arrays - Apa itu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!