JavaScript - Penavigasi DOM

Hai sana, para ahli JavaScript masa depan! ? Apakah Anda siap untuk memulai perjalanan menarik melalui dunia magis penavigasi DOM? Sebagai guru ilmu komputer di lingkungan Anda, saya sangat gembira untuk mengorbit Anda melalui petualangan ini. Jadi, ambil kompas maya Anda, dan mari kita mulai menjelajahi!

JavaScript - DOM Navigation

Apa Itu Node DOM?

Imajinasikan DOM (Document Object Model) sebagai pohon keluarga halaman web Anda. Setiap elemen dalam pohon ini disebut node. Seperti di keluarga nyata, node ini memiliki hubungan satu sama lain - orang tua, anak, dan saudara. Keren, kan?

mari kita lihat contoh sederhana:

<html>
<head>
<title>Halaman Saya yang Menakjubkan</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<pIni adalah paragraf.</p>
</body>
</html>

Dalam "keluarga" ini, elemen <html> adalah kakek buyut, <head> dan <body> adalah anaknya, dan seterusnya. Setiap elemen ini adalah node dalam pohon DOM kita.

Hubungan Antara Node HTML DOM

Sekarang kita mengerti apa itu node, mari kita jelajahi bagaimana mereka berhubungan. Dalam pohon keluarga DOM kita:

Node induk memiliki anak
Anak memiliki orang tua
Saudara adalah node dengan orang tua yang sama

Misalnya, dalam HTML kita sebelumnya:

<html> adalah induk dari <head> dan <body>
<head> dan <body> adalah saudara
<h1> dan <p> adalah anak dari <body>

Menavigasi Antara Node Dengan JavaScript

Waktunya memakai topi penjelajah! ? JavaScript memberikan kita beberapa alat yang bagus untuk menavigasi antara node. Mari kita masuk ke dalam!

Mengakses Elemen Anak Pertama

Untuk mendapatkan anak pertama dari suatu elemen, kita gunakan properti firstElementChild. Berikut adalah caranya:

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // Output: H1

Dalam contoh ini, kita mencari anak pertama tag <body>, yang adalah elemen <h1>.

Mengakses Elemen Anak Terakhir

Sebagaimana yang sama, kita dapat menemukan anak terakhir menggunakan lastElementChild:

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // Output: P

Di sini, kita mendapatkan anak terakhir dari <body>, yang adalah elemen <p>.

Mengakses Semua Anak Elemen HTML

Ingin melihat semua anak? Gunakan children:

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// Output:
// H1
// P

Kode ini mengulang semua anak <body> dan mencatat tag namanya.

Mengakses Node Induk Elemen HTML

Untuk menemukan induk node, kita gunakan parentNode:

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // Output: BODY

Di sini, kita menemukan induk elemen <h1>, yang adalah <body>.

Mengakses Node Saudara Selanjutnya

Untuk menemukan saudara berikutnya, gunakan nextElementSibling:

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // Output: P

Kode ini menemukan saudara yang mengikuti <h1>, yang adalah elemen <p>.

Mengakses Node Saudara Sebelumnya

Dan untuk saudara sebelumnya, gunakan previousElementSibling:

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // Output: H1

Di sini, kita menemukan saudara sebelum <p>, yang adalah <h1>.

Node Root DOM

Setiap pohon keluarga memiliki akarnya, dan di DOM, kita memiliki tiga utama:

document.documentElement - Elemen root (biasanya <html>)
document.head - Elemen <head>
document.body - Elemen <body>

console.log(document.documentElement.tagName); // Output: HTML
console.log(document.head.tagName); // Output: HEAD
console.log(document.body.tagName); // Output: BODY

Properti nodeName DOM

Setiap node memiliki nama, yang kita dapat mengakses menggunakan properti nodeName:

let heading = document.querySelector('h1');
console.log(heading.nodeName); // Output: H1

Properti nodeValue DOM

Properti nodeValue memberikan kita nilai node. Untuk node teks, ini adalah konten teks:

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // Output: Selamat Datang!

Tipe Node di DOM

Tidak semua node diciptakan sama! Ada jenis-jenis node yang berbeda di DOM. Berikut adalah yang utama:

Tipe Node	Deskripsi	nilai nodeType
Element Node	Setiap elemen HTML (seperti `<p>`, `<div>`, dll.)	1
Attribute Node	Sebuah atribut elemen HTML	2
Text Node	Teks dalam elemen HTML	3
Comment Node	Sebuah komentar HTML	8
Document Node	Seluruh dokumen	9

Properti nodeType DOM

Kita dapat menggunakan properti nodeType untuk menentukan jenis node yang kita hadapi:

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('Ini adalah komentar');

console.log(element.nodeType); // Output: 1 (Element Node)
console.log(textNode.nodeType); // Output: 3 (Text Node)
console.log(commentNode.nodeType); // Output: 8 (Comment Node)

Dan begitu pun, teman-teman! Anda telah menavigasi DOM seperti seorang pro. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Sebelum Anda tahu, Anda akan melintasi pohon DOM lebih cepat daripada tupai di pabrik kacang! ?️

Happy coding, dan may the DOM be with you! ?

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Animasi DOM

Tutorial Seterusnya:

JavaScript - Koleksi DOM