Daftar Node DOM JavaScript HTML
Objek NodeList DOM HTML
Objek NodeList
adalah daftar (kumpulan) node yang diekstraksi dari dokumen.
Sebuah NodeList
objek hampir sama dengan sebuah HTMLCollection
objek.
Beberapa browser (lama) mengembalikan objek NodeList alih-alih HTMLCollection untuk metode seperti getElementsByClassName()
.
Semua browser mengembalikan objek NodeList untuk properti tersebut childNodes
.
Sebagian besar browser mengembalikan objek NodeList untuk metode tersebut querySelectorAll()
.
Kode berikut memilih semua <p>
node dalam dokumen:
Contoh
const myNodeList = document.querySelectorAll("p");
Elemen-elemen dalam NodeList dapat diakses dengan nomor indeks.
Untuk mengakses simpul <p> kedua Anda dapat menulis:
myNodeList[1]
Catatan: Indeks dimulai dari 0.
Panjang Daftar Node DOM HTML
Properti length
mendefinisikan jumlah node dalam daftar node:
Contoh
myNodelist.length
Properti length
ini berguna ketika Anda ingin mengulang node dalam daftar node:
Contoh
Ubah warna semua elemen <p> dalam daftar simpul:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
Perbedaan Antara Koleksi HTML dan NodeList
Sebuah HTMLCollection
(bab sebelumnya) adalah kumpulan elemen HTML.
A NodeList
adalah kumpulan node dokumen.
Koleksi NodeList dan HTML sangat mirip.
Baik objek HTMLCollection dan objek NodeList adalah daftar (koleksi) objek seperti array.
Keduanya memiliki properti length yang menentukan jumlah item dalam daftar (koleksi).
Keduanya menyediakan indeks (0, 1, 2, 3, 4, ...) untuk mengakses setiap item seperti array.
Item HTMLCollection dapat diakses dengan nama mereka, id, atau nomor indeks.
Item NodeList hanya dapat diakses dengan nomor indeksnya.
Hanya objek NodeList yang dapat berisi node atribut dan node teks.
Daftar simpul bukan larik!
Daftar node mungkin terlihat seperti array, tetapi sebenarnya tidak.
Anda dapat mengulang daftar simpul dan merujuk ke simpulnya seperti array.
Namun, Anda tidak dapat menggunakan Metode Array, seperti valueOf(), push(), pop(), atau join() pada daftar node.