JavaScript - Senarai Node DOM

Pengenalan kepada Senarai Node DOM

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan memulai perjalanan menarik ke dunia JavaScript DOM Node Lists. Jangan khawatir jika Anda masih baru dalam programming - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini secara bertahap. Pada akhir panduan ini, Anda akan dapat mengubah halaman web seperti seorang ahli!

Apa Itu Senarai Node DOM?

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

Sebuah Senarai Node adalah hanya sebuah koleksi dari node-node ini. Itu seperti memiliki daftar tamu untuk sebuah pesta, di mana setiap tamu adalah elemen dari halaman web Anda.

Contoh 1: Mendapatkan Senarai Node

mari kita lihat sebuah contoh sederhana:

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

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

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

NodeList(3) [p, p, p]

Ini memberitahu kita bahwa kita memiliki Senarai Node yang mengandung tiga elemen paragraf.

Bekerja dengan Senarai Node

Sekarang kita memiliki Senarai Node, mari kita lihat apa yang bisa kita lakukan dengannya!

Contoh 2: Mengiterasi Melalui Senarai Node

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

paragraf.forEach((paragraph, index) => {
console.log(`Paragraf ${index + 1}: ${paragraph.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 dalam Senarai Node. Itu seperti mengenal setiap tamu di daftar tamu pesta secara individual!

Magic of Live vs. Static Node Lists

Sekarang, mari kita lihat hal yang menarik. Senarai Node dapat sia-sia atau statis.

Sebuah Senarai Node yang hidup adalah seperti daftar tamu yang magis yang memperbarui dirinya sendiri ketika orang datang atau meninggalkan pesta. Sebaliknya, sebuah Senarai Node statis adalah seperti sebuah foto dari daftar tamu pada saat tertentu - foto itu tidak akan diperbarui saat tamu baru datang.

Contoh 3: Senarai Node yang Hidup

<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 sebuah Senarai Node yang hidup. Ketika kita menambahkan Charlie ke daftar, Senarai Node guests secara otomatis diperbarui!

Contoh 4: Senarai 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 sebuah Senarai Node yang statis. Meskipun kita menambahkan Charlie, Senarai Node guests tidak berubah. Itu seperti kita mengambil sebuah foto dari daftar tamu dan foto itu tidak akan diperbarui saat tamu baru datang.

Perbedaan antara HTMLCollection dan NodeList

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

HTMLCollection

Sebuah HTMLCollection selalu hidup. Itu seperti daftar tamu yang terus memperbarui dirinya sendiri.

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

NodeList

Sebuah NodeList dapat sia-sia atau statis, tergantung pada bagaimana ia diciptakan.

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

Berikut ini adalah tabel yang menyummarisakan perbedaan mereka:

Fitur	HTMLCollection	NodeList
Hidup/Statis	Selalu hidup	Bisa hidup atau statis
Isi	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 di sana Anda punya nya, teman-teman! Kita telah melakukan perjalanan melalui tanah Senarai Node DOM, dari konsep dasar hingga ke halusnya antara senarai hidup 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 pergi sendiri...)

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

Credits: Image by storyset