JavaScript - Document Object Model (DOM)

Apa DOM?

Document Object Model, biasanya dikenal sebagai DOM, adalah antarmuka programming untuk dokumen HTML dan XML. Itu mewakili struktur dokumen sebagai hierarki seperti pohon dari objek, di mana setiap objek mengkorresponden dengan bagian dari dokumen, seperti elemen, atribut, atau node teks.

JavaScript - HTML DOM

Bayangkan Anda membangun rumah dengan batu Lego. DOM seperti memiliki blueprint magis yang tidak hanya menunjukkan bagaimana rumah dibangun tetapi juga memungkinkan Anda untuk memanipulasi dan mengurutkan kembali batu-batu tersebut menggunakan JavaScript. Itu adalah alat yang kuat yang membangun 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 Pertama DOM</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 terlihat seperti ini:

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

Apa HTML DOM?

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

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

Dalam esensial, HTML DOM adalah standar untuk mendapatkan, mengubah, menambahkan, atau menghapus elemen HTML.

Bekerja dengan HTML DOM

mari eksplor beberapa operasi umum menggunakan HTML DOM:

Mengakses Elemen

// Dapatkan elemen oleh ID-nya
const heading = document.getElementById('mainHeading');

// Dapatkan elemen oleh nama tag-nya
const paragraphs = document.getElementsByTagName('p');

// Dapatkan elemen oleh nama kelas-nya
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 kita. Itu seperti menggunakan tongkat sihir untuk menunjukkan bagian khusus dari halaman web kita!

Mengubah Konten

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

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

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

Mengubah gaya

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

Dengan baris ini, kita mengubah gaya heading kita, mengubah warna dan ukuran font. Itu seperti memiliki desainer mode untuk elemen web kita!

Membuat dan Menghapus Elemen

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

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

// Hapus 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 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, mempertahankan pemisahan antara HTML dan CSS.
Kompatibilitas Cross-browser: DOM menyediakan antarmuka programming standar yang bekerja di berbagai browser, memastikan konsistensi dalam pengembangan web.
Penanganan Event: DOM memungkinkan kita untuk menempelkan pendengar event ke elemen, memungkinkan kita untuk merespon interaksi pengguna seperti klik, penekanan tombol, dan gerakan mouse.
AJAX dan Single Page Applications: DOM sangat penting untuk memperbarui bagian halaman web tanpa memuat ulang seluruh halaman, yang menjadi dasar aplikasi web modern.

mari lihat contoh yang menggabungkan banyak konsep ini:

<!DOCTYPE html>
<html>
<head>
<title>Daftar Tugas</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 dan gaya elemen
Menangani event
Memperbarui halaman secara dinamis tanpa memuat ulang

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

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 tertentu
`getElementsByClassName()`	Mengembalikan koleksi elemen dengan nama kelas tertentu
`getElementsByTagName()`	Mengembalikan koleksi elemen dengan nama tag tertentu
`querySelector()`	Mengembalikan elemen pertama yang cocok dengan selektor CSS
`querySelectorAll()`	Mengembalikan semua elemen yang cocok dengan selektor CSS
`createElement()`	Membuat elemen baru
`appendChild()`	Menambahkan anak elemen baru
`removeChild()`	Menghapus anak elemen
`innerHTML`	Mendapatkan atau menyetel konten HTML dalam elemen
`textContent`	Mendapatkan atau menyetel konten teks elemen
`style`	Mendapatkan atau menyetel gaya inline elemen
`classList`	Memungkinkan manipulasi kelas elemen
`addEventListener()`	Menambahkan pengurus event ke elemen

Dalam kesimpulan, DOM adalah alat yang kuat yang memberikan kehidupan ke halaman web. Itu memungkinkan kita untuk menciptakan pengalaman web interaktif dan dinamis yang merespon tindakan pengguna dan memperbarui halaman secara real-time. Sepanjang perjalanan Anda dalam pengembangan web, Anda akan menemukan DOM sebagai sekutu tak ternilai dalam menciptakan aplikasi web yang menarik dan responsif. Selamat belajar!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - kata kunci var

Tutorial Seterusnya:

JavaScript - Kaedah DOM