JavaScript - Daftar Node DOM

Pengenalan ke Daftar Node DOM

Hai teman-teman pengembang web yang bersemangat! Hari ini, kita akan memulai perjalanan menarik ke dunia JavaScript DOM Node Lists. Jangan khawatir jika Anda baru belajar programming - saya akan menjadi panduan ramah Anda, dan kita akan bergerak langkah demi langkah. Pada akhir panduan ini, Anda akan dapat mengubah halaman web seperti seorang ahli!

Apa Itu Daftar Node DOM?

Sebelum kita masuk ke detil, mari mulai dari dasar. Gamarkanlah halaman web seperti pohon keluarga. DOM (Document Object Model) adalah seperti pohon keluarga bagi halaman web. Setiap elemen pada halaman - baik itu paragraf, tombol, atau gambar - adalah anggota keluarga ini, atau dalam istilah teknis, "node."

Daftar Node adalah sekumpulan node ini. Itu seperti memiliki daftar tamu untuk pesta, di mana setiap tamu adalah elemen dari halaman web Anda.

Contoh 1: Mendapatkan Daftar Node

Mari lihat contoh sederhana:

<div>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
</div>

<script>
let paragrafs = document.querySelectorAll('p');
console.log(paragrafs);
</script>

Dalam contoh ini, querySelectorAll('p') mengembalikan Daftar Node yang berisi semua elemen <p>. Jika Anda menjalankan ini di konsol browser Anda, Anda akan melihat seperti ini:

NodeList(3) [p, p, p]

Ini memberitahu kita bahwa kita memiliki Daftar Node yang berisi tiga elemen paragraf.

Menggunakan Daftar Node

Sekarang kita sudah mendapatkan Daftar Node, mari lihat apa yang bisa kita lakukan dengannya!

Contoh 2: Mengiterasi Melalui Daftar Node

let paragrafs = document.querySelectorAll('p');

paragrafs.forEach((paragraf, index) => {
console.log(`Paragraf ${index + 1}: ${paragraf.textContent}`);
});

Kode ini akan mengoutputkan:

Paragraf 1: Paragraf 1
Paragraf 2: Paragraf 2
Paragraf 3: Paragraf 3

Di sini, kita menggunakan metode forEach untuk mengiterasi melalui setiap paragraf di Daftar Node. Itu seperti menghubungi setiap tamu di daftar tamu pesta secara individual!

Magic of Live vs. Static Node Lists

Sekarang, mari kita lihat hal yang menarik. Daftar Node bisa sia-sia atau statis.

Daftar Node yang live adalah seperti daftar tamu yang magis yang memperbarui dirinya sendiri saat orang datang atau pergi dari pesta. Sebaliknya, Daftar Node statis seperti snapshot daftar tamu di saat tertentu - itu tidak berubah meskipun tamu baru datang.

Contoh 3: Daftar Node Live

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // Output: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // Output: 3
</script>

Dalam contoh ini, getElementsByTagName mengembalikan Daftar Node live. Ketika kita menambahkan Charlie ke daftar, Daftar Node guests secara otomatis diperbarui!

Contoh 4: Daftar Node Statis

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // Output: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // Tetap output: 2
</script>

Di sini, querySelectorAll mengembalikan Daftar Node statis. Meskipun kita menambahkan Charlie, Daftar Node guests tidak berubah. Itu seperti kita mengambil foto daftar tamu dan foto itu tidak diperbarui saat tamu baru datang.

Perbedaan antara HTMLCollection dan NodeList

Sekarang, mari kita bicarakan tentang dua saudara sepupu di keluarga DOM: HTMLCollection dan NodeList. Mereka mirip, tetapi mereka memiliki ciri khususnya sendiri.

HTMLCollection

Sebuah HTMLCollection selalu live. Itu seperti daftar tamu yang terus diperbarui.

let divs = document.getElementsByTagName('div'); // Mengembalikan HTMLCollection

NodeList

Sebuah NodeList bisa sia-sia atau statis, tergantung pada bagaimana itu diciptakan.

let paragrafs = document.querySelectorAll('p'); // Mengembalikan NodeList statis
let childNodes = document.body.childNodes; // Mengembalikan NodeList live

Berikut adalah tabel yang menggabungkan perbedaan mereka:

Fitur	HTMLCollection	NodeList
Live/Statis	Selalu live	Bisa live atau statis
Konten	Hanya node elemen	Bisa termasuk semua jenis node
Mengakses item	Dengan nama, id, atau indeks	Hanya dengan indeks
Metode forEach	Tidak tersedia	Tersedia

Kesimpulan

Dan begitu saja, teman-teman! Kita telah melakukan perjalanan melalui tanah Daftar Node DOM, dari konsep dasar ke kehalusan daftar live dan statis. Ingat, latihan membuat sempurna. Cobalah contoh ini, eksperimen dengannya, dan segera Anda akan dapat mengubah halaman web seperti seorang pengembang berpengalaman!

Sebelum kita berpisah, ini adalah sedikit lelucon pengembang web untuk Anda: Mengapa pengembang JavaScript memakai kacamata? Karena dia tidak bisa C#! (Pahamkah? C Sharp? Baiklah, saya akan keluar sendiri...)

Terus coding, terus belajar, dan yang paling penting, terus bersenang-senang dengan JavaScript!

Credits: Image by storyset