JavaScript - Navigasi DOM

Hai teman-teman, para ahli JavaScript masa depan! ? Apakah Anda siap untuk memulai perjalanan yang menarik melalui dunia magis navigasi DOM? Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk memandu Anda dalam petualangan ini. Jadi, pegang kompas maya Anda, dan mari kita mulai mengeksplorasi!

JavaScript - DOM Navigation

Apa Itu Node DOM?

Bayangkan DOM (Document Object Model) sebagai pohon keluarga untuk halaman web Anda. Setiap elemen dalam pohon ini disebut node. Seperti dalam keluarga nyata, node-node ini memiliki hubungan satu sama lain – orangtua, anak, dan saudara. Menarik, kan?

mari kita lihat contoh sederhana:

<html>
<head>
<title>Halaman Saya yang Menakjubkan</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini 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-node HTML DOM

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

Node orangtua memiliki anak
Anak memiliki orangtua
Saudara adalah node dengan orangtua yang sama

Misalnya, dalam HTML kita sebelumnya:

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

Navigasi Antara Node menggunakan JavaScript

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

Mengakses Anak Pertama Elemen

Untuk mendapatkan anak pertama dari elemen, kita gunakan properti firstElementChild. mari kita lihat bagaimana:

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 Anak Terakhir Elemen

Secara mirip, 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 melooping melalui semua anak <body> dan mencatat tag name mereka.

Mengakses Node Orangtua Elemen HTML

Untuk menemukan orangtua node, kita gunakan parentNode:

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

Di sini, kita mencari orangtua 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 muncul setelah <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 mencari saudara sebelum <p>, yang adalah <h1>.

Node Root DOM

Setiap pohon keluarga memiliki akarnya, dan dalam 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 dalam DOM

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

Tipe Node	Deskripsi	nilai nodeType
Element Node	Setiap elemen HTML (seperti `<p>`, `<div>`, dll.)	1
Attribute Node	Sebuah atribut dari 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 saja, teman-teman! Anda telah menavigasi DOM seperti seorang ahli. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep-konsep ini. Sebelum Anda tahu, Anda akan menavigasi pohon DOM lebih cepat daripada tupai di pabrik kacang! ?️

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

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Animasi DOM

Tutorial Selanjutnya:

JavaScript - Koleksi DOM