DOM Tree

JavaScript memberikan kamu kemampuan untuk mengakses dan memanipulasi elemen-elemen dari sebuah halaman web melalui sebuah interface yang dikenal sebagai Document Object Model, atau DOM. Dalam konteks ini, model objek merujuk pada struktur data yang mewakili elemen-elemen dan hubungan antara elemen tersebut di dalam halaman web. DOM ini, direpresentasikan sebagai pohon atau “DOM tree”.

Mengenal DOM Tree

DOM Tree adalah representasi visual dari struktur HTML sebuah halaman web. Setiap elemen, atribut, dan teks dalam HTML diwakili sebagai “node” dalam DOM tree.

Struktur DOM Tree

Struktur DOM Tree terdiri dari “root node”, “parent node”, “child node”, dan “sibling node”.

Root node adalah titik awal dalam DOM Tree, biasanya direpresentasikan oleh objek document dalam JavaScript.
Parent node adalah node yang memiliki node lain di bawahnya.
Child node adalah node yang berada di bawah node lain.
Sibling node adalah node yang memiliki parent node yang sama.

Misalnya, dalam struktur HTML berikut:

<html>
  <body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah paragraf.</p>
  </body>
</html>

<html> adalah root node
<body> adalah child node dari <html>, dan parent node dari <h1> dan <p>
<h1> dan <p> adalah sibling node, karena mereka berada pada level yang sama dan memiliki parent node yang sama yaitu <body>

Mengakses Node dalam DOM Tree

JavaScript menyediakan berbagai metode untuk mengakses dan memanipulasi node dalam DOM Tree.

Mengakses Elemen Dengan ID

Metode getElementById dapat digunakan untuk mengakses elemen berdasarkan ID-nya.

var judul = document.getElementById("judul");

Mengakses Elemen Dengan Nama Kelas

Metode getElementsByClassName dapat digunakan untuk mengakses elemen berdasarkan namanya.

var paragraf = document.getElementsByClassName("paragraf");

Mengakses Elemen Dengan Tag Name

Metode getElementsByTagName digunakan untuk mengakses elemen berdasarkan nama tag-nya.

var headings = document.getElementsByTagName("h1");

Menjelajahi DOM Tree

Setelah mendapatkan elemen tertentu menggunakan metode-metode di atas, kamu dapat menjelajahi DOM Tree lebih lanjut dengan menggunakan properti seperti parentNode, nextSibling, dan previousSibling.

var judulParent = document.getElementById("judul").parentNode;

Semoga penjelasan tentang DOM Tree dalam JavaScript ini bisa membantu kamu memahaminya dengan lebih baik. Selamat belajar!