JavaScript - Document Object Model (DOM)

Apa itu DOM?

Model Objek Dokumen, biasa dikenal sebagai DOM, adalah sebuah antarmuka programming untuk dokumen HTML dan XML. Itu mewakili struktur dokumen sebagai hierarki seperti pohon dari objek, di mana setiap objek mengacu pada bagian dari dokumen, seperti elemen, atribut, atau node teks.

JavaScript - HTML DOM

Bayangkan Anda membangun sebuah rumah dengan batu Lego. DOM adalah seperti memiliki blueprint magis yang tidak hanya menunjukkan bagaimana rumah itu dibangun, tetapi juga memungkinkan Anda untuk memanipulasi dan mengatur ulang batu-batu tersebut menggunakan JavaScript. Itu adalah alat yang kuat yang membentuk jembatan antara halaman web dan bahasa programming.

Konsep Utama DOM

Node: Setiap bagian dari dokumen adalah node. Elemen, atribut, dan teks adalah jenis node yang berbeda.
Struktur Pohon: DOM mewakili dokumen sebagai pohon, dengan objek document di akar.
Navigasi: Anda dapat menavigasi melalui pohon DOM menggunakan berbagai metode dan properti.
Manipulasi: DOM memungkinkan Anda untuk mengubah struktur, gaya, dan konten dokumen secara dinamis.

mari lihat contoh sederhana untuk mengilustrasikan konsep ini:

<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM Pertama Saya</title>
</head>
<body>
<h1 id="mainHeading">Selamat Datang di DOM</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

Dalam dokumen HTML ini, pohon DOM akan tampak seperti ini:

document
└── html
├── head
│   └── title
│       └── "Contoh DOM Pertama Saya"
└── body
├── h1
│   └── "Selamat Datang di DOM"
└── p
└── "Ini adalah paragraf."

Apa itu HTML DOM?

HTML DOM adalah model objek standar dan antarmuka programming untuk HTML. Itu menetapkan:

Elemen HTML sebagai objek
Properti semua elemen HTML
Metode untuk mengakses semua elemen HTML
Event untuk semua elemen HTML

Dalam inti, HTML DOM adalah standar untuk bagaimana mengambil, mengubah, menambahkan, atau menghapus elemen HTML.

Bekerja dengan HTML DOM

mari eksplor beberapa operasi umum menggunakan HTML DOM:

Mengakses Elemen

// Mengambil elemen berdasarkan ID
const heading = document.getElementById('mainHeading');

// Mengambil elemen berdasarkan nama tag
const paragraphs = document.getElementsByTagName('p');

// Mengambil elemen berdasarkan nama kelas
const highlights = document.getElementsByClassName('highlight');

// Menggunakan querySelector untuk seleksi yang lebih kompleks
const firstParagraph = document.querySelector('p');

Dalam contoh ini, kita menggunakan berbagai metode untuk memilih elemen dari dokumen HTML. Itu seperti menggunakan tongkat sihir untuk menunjukkan bagian khusus dari halaman web kita!

Mengubah Konten

// Mengubah konten teks elemen
heading.textContent = 'Selamat Datang di Dunia yang Menakjubkan DOM!';

// Mengubah konten HTML elemen
paragraphs[0].innerHTML = 'Paragraf ini telah <strong>dimodifikasi</strong>!';

Di sini, kita mengubah konten elemen. Itu seperti menghapus dan menulis ulang bagian dari halaman web kita secara instan!

Mengubah gaya

// Mengubah gaya elemen
heading.style.color = 'blue';
heading.style.fontSize = '24px';

Dengan baris ini, kita memberikan heading kita make over, mengubah warna dan ukurannya. Itu seperti memiliki desainer mode untuk elemen web kita!

Membuat dan Menghapus Elemen

// Membuat elemen baru
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Ini adalah paragraf yang baru diciptakan.';

// Menambahkan elemen baru ke dokumen
document.body.appendChild(newParagraph);

// Menghapus elemen
document.body.removeChild(paragraphs[0]);

Dalam contoh ini, kita bermain peran arsitek halaman web – membangun elemen baru dan menghancurkan yang lama hanya dengan beberapa baris kode!

Mengapa DOM diperlukan?

DOM sangat penting karena beberapa alasan:

Halaman Web Dinamis: Tanpa DOM, halaman web akan statis. DOM memungkinkan kita untuk menciptakan pengalaman web interaktif dan dinamis.
Pemisahan Kewenangan: DOM menyediakan cara untuk memanipulasi konten dan struktur halaman web menggunakan JavaScript, menjaga pemisahan dari HTML dan CSS.
Kompatibilitas Cross-browser: DOM menyediakan antarmuka programming standar yang bekerja di berbagai browser, memastikan konsistensi dalam pengembangan web.
Pengaturan Event: DOM memungkinkan kita untuk menempelkan pengguna event listener ke elemen, memungkinkan kita untuk merespon interaksi pengguna seperti klik, tekanan tombol, dan gerakan mouse.
AJAX dan Single Page Applications: DOM sangat penting untuk memperbarui bagian dari halaman web tanpa memuat ulang keseluruhan halaman, yang menjadi dasar aplikasi web modern.

mari lihat contoh yang menggabungkan banyak konsep ini:

<!DOCTYPE html>
<html>
<head>
<title>Daftar Tugas Saya</title>
<style>
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>Daftar Tugas Saya</h1>
<input type="text" id="newTodo">
<button id="addTodo">Tambah Tugas</button>
<ul id="todoList"></ul>

<script>
const newTodoInput = document.getElementById('newTodo');
const addTodoButton = document.getElementById('addTodo');
const todoList = document.getElementById('todoList');

addTodoButton.addEventListener('click', function() {
const todoText = newTodoInput.value;
if (todoText) {
const li = document.createElement('li');
li.textContent = todoText;

li.addEventListener('click', function() {
this.classList.toggle('completed');
});

todoList.appendChild(li);
newTodoInput.value = '';
}
});
</script>
</body>
</html>

Contoh ini menunjukkan aplikasi daftar tugas sederhana. Itu menampilkan:

Mengakses elemen menggunakan DOM
Membuat elemen baru
Mengubah konten elemen
Mengubah gaya elemen
Mengatur event
Memperbarui halaman secara dinamis tanpa memuat ulang

Dengan menggunakan DOM, kita menciptakan aplikasi interaktif yang merespon input pengguna dan memperbarui halaman secara real-time. Ini adalah kekuatan DOM dalam aksi!

Metode dan Properti DOM Umum

Berikut adalah tabel dari beberapa metode dan properti DOM yang umum digunakan:

Metode/Properti	Deskripsi
`getElementById()`	Mengembalikan elemen dengan ID yang ditentukan
`getElementsByClassName()`	Mengembalikan koleksi elemen dengan nama kelas yang ditentukan
`getElementsByTagName()`	Mengembalikan koleksi elemen dengan nama tag yang ditentukan
`querySelector()`	Mengembalikan elemen pertama yang cocok dengan pemilih CSS
`querySelectorAll()`	Mengembalikan semua elemen yang cocok dengan pemilih CSS
`createElement()`	Membuat elemen baru
`appendChild()`	Menambahkan anak elemen baru
`removeChild()`	Menghapus anak elemen
`innerHTML`	Mengambil atau mengatur konten HTML di dalam elemen
`textContent`	Mengambil atau mengatur konten teks elemen
`style`	Mengambil atau mengatur gaya inline elemen
`classList`	Memungkinkan manipulasi kelas elemen
`addEventListener()`	Menempelkan pengguna event listener ke elemen

Dalam kesimpulan, DOM adalah alat yang kuat yang memberikan kehidupan kepada halaman web. Itu memungkinkan kita untuk menciptakan pengalaman web interaktif dan dinamis yang merespon tindakan pengguna dan memperbarui halaman secara real-time. Sebagai Anda terus melanjutkan perjalanan Anda dalam pengembangan web, Anda akan menemukan DOM sebagai sekutu tak terpisahkan dalam menciptakan aplikasi web yang menarik dan tanggap. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - kata kunci var

Tutorial Selanjutnya:

JavaScript - Metode DOM