Bagaimanakah HTMLCollections, NodeLists dan Tatasusunan Objek Berbeza dalam Manipulasi DOM?

Membezakan HTMLCollections, NodeLists dan Object Arrays dalam DOM

Apabila mengakses nod DOM, pembangun sering menghadapi HTMLCollections, NodeLists dan tatasusunan objek. Memahami perbezaan antara struktur data ini adalah penting untuk memanipulasi struktur dokumen dengan berkesan.

HTMLCollections vs. NodeLists

HTMLCollections dan NodeLists berkongsi persamaan sebagai koleksi nod, tetapi mereka mempunyai ciri yang berbeza:

• Kandungan: HTMLKoleksi hanya mengandungi nod Elemen, manakala NodeLists boleh menyimpan sebarang jenis nod.
• Kaedah: Dalam sebagai tambahan kepada kaedah biasa untuk semua koleksi, HTMLCollections menyediakan kaedah NameItem untuk mengakses elemen mengikut nama.

Live vs. Snapshot Collections

Koleksi DOM boleh sama ada langsung atau syot kilat:

• Siaran Langsung: Koleksi dikemas kini secara automatik apabila perubahan dibuat pada DOM.
• Snapshot: Koleksi kekal tetap, tanpa mengira pengubahsuaian DOM.

Koleksi DOM yang dikembalikan melalui kaedah penyemak imbas (cth., getElementsByTagName) biasanya disiarkan secara langsung, manakala pilihan jQuery ialah syot kilat.

Array lwn. Object Arrays

Turutan Objek:

Tatasusunan yang mana elemen diakses menggunakan kedua-dua sifat numerik dan bernama.

• Memilih Nod
• Menggunakan Kaedah Dokumen:

document.getElementsByTagName("td"): Mengembalikan HTMLCollection semua elemen td.document.getElementsByClassName("myRow"): Return Senarai Node semua elemen dengan kelas "myRow".

Menggunakan jQuery:

• $("td"): Memilih semua elemen td dan mengembalikan objek jQuery, tatasusunan objek.

Skrip Contoh

Skrip yang disediakan menunjukkan perbezaan antara struktur data:

• console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: Membandingkan tatasusunan.
• konsol. log('{123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}: Membandingkan tatasusunan objek dengan sintaks objek.
• console.log('Node=',Node): Log objek Nod global, iaitu tatasusunan objek yang mewakili jenis nod.
• console.log('document. links=',document.links): Log HTMLKoleksi pautan.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): Log satu elemen, bukan koleksi.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): Log senarai Node elemen dengan kelas "myRow".
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): Log HTMLKoleksi semua elemen td.
• console.log( '$("#myTable")=',$("#myTable")): Log objek jQuery yang mewakili elemen #myTable.
• console.log('$("td")=', $("td")): Log tatasusunan objek jQuery yang mengandungi semua elemen td.

Atas ialah kandungan terperinci Bagaimanakah HTMLCollections, NodeLists dan Tatasusunan Objek Berbeza dalam Manipulasi DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!