JavaScript - DOM Document: A Panduan untuk Pemula

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik ke dunia JavaScript dan Document Object Model (DOM). Jangan khawatir jika istilah ini terdengar sedikit menakutkan - setelah selesai tutorial ini, Anda akan dapat memanipulasi halaman web seperti seorang ahli!

JavaScript - DOM Document

Apa itu HTML DOM Document?

Bayangkan Anda sedang membangun sebuah rumah. Blueprint dari rumah itu seperti dokumen HTML Anda, dan rumah yang sebenarnya seperti apa yang Anda lihat di browser. Sekarang, apa bila Anda ingin mengubah warna dinding atau menambah jendela setelah rumah sudah dibangun? Itu adalah tempat DOM memasuki permainan!

HTML DOM (Document Object Model) adalah sebuah antarmuka programming untuk dokumen HTML. Itu mewakili struktur dokumen sebagai hierarki seperti pohon, di mana setiap node adalah objek yang mewakili bagian dari dokumen.

The Document Object

Di akar pohon ini adalah objek document. Itu seperti dasar rumah kita - segala sesuatu yang lain dibangun di atasnya.

Mari kita mulai dengan contoh sederhana:

<!DOCTYPE html>
<html>
<head>
<title>Halaman DOM Pertama Saya</title>
</head>
<body>
<h1>Selamat Datang di DOM!</h1>
<p>Ini adalah sebuah paragraf.</p>
</body>
</html>

Dalam struktur HTML ini, document berada di puncak, diikuti oleh html, kemudian head dan body, dan seterusnya.

Mengakses DOM Document Object

Sekarang kita mengerti apa itu DOM, mari belajar bagaimana mengaksesnya. Dalam JavaScript, kita dapat mengakses objek dokumen menggunakan kata kunci document.

Ini adalah contoh sederhana:

console.log(document);

Jika Anda menjalankan ini di konsol browser Anda, Anda akan melihat seluruh objek dokumen. Itu seperti mendapat pandangan burung pipit atas rumah kita!

Properti Properti DOM Document

Objek dokumen memiliki banyak properti yang memungkinkan kita mengakses bagian-bagian berbeda dari dokumen HTML. Mari kita jelajahi beberapa properti ini:

Properti childElementCount

Properti childElementCount mengembalikan jumlah elemen anak yang dimiliki suatu elemen. Untuk objek dokumen, itu mengembalikan jumlah anak langsung dari elemen <html>.

console.log(document.childElementCount);

Ini biasanya mengembalikan 1, karena elemen <html> biasanya hanya memiliki satu anak langsung: elemen <body>.

Properti Links

Properti links mengembalikan koleksi semua elemen <a> dan <area> di dokumen yang memiliki atribut href.

console.log(document.links);

Ini seperti bertanya, "Berapa banyak pintu (tautan) yang ada di rumah kita?"

Properti Title

Properti title mengambil atau mengatur judul dokumen saat ini.

console.log(document.title);
document.title = "Judul Baru Saya";

Itu seperti mengubah plak nama di rumah Anda!

Contoh Praktis

Mari kita menerapkan pengetahuan kita dengan beberapa contoh dunia nyata:

Contoh 1: Mengubah Judul Halaman

document.title = "Selamat Datang di " + document.title;
console.log("Judul baru adalah: " + document.title);

Skrip ini menambahkan "Selamat Datang di " di awal judul halaman saat ini. Itu seperti menambahkan salam ramah ke plak nama rumah Anda!

Contoh 2: Menghitung Tautan

let linkCount = document.links.length;
console.log("Halaman ini memiliki " + linkCount + " tautan.");

Skrip ini menghitung berapa banyak tautan yang ada di halaman Anda. Itu seperti menghitung berapa banyak cara untuk meninggalkan rumah Anda!

Contoh 3: Mengubah Konten Halaman

let newHeading = document.createElement("h2");
newHeading.textContent = "Judul ini ditambahkan oleh JavaScript!";
document.body.appendChild(newHeading);

Skrip ini membuat elemen <h2> baru, menetapkan konten teksnya, dan menambahkannya ke akhir <body>. Itu seperti menambahkan ruangan baru ke rumah Anda dengan JavaScript!

Metode Umum DOM Document

Berikut adalah tabel metode umum DOM document:

Metode	Deskripsi
`document.getElementById(id)`	Mengembalikan elemen dengan ID yang ditentukan
`document.getElementsByClassName(name)`	Mengembalikan koleksi elemen dengan nama kelas yang ditentukan
`document.getElementsByTagName(name)`	Mengembalikan koleksi elemen dengan nama tag yang ditentukan
`document.createElement(name)`	Membuat elemen node
`document.createTextNode(text)`	Membuat node teks
`document.querySelector(selector)`	Mengembalikan elemen pertama yang cocok dengan pemilih CSS
`document.querySelectorAll(selector)`	Mengembalikan semua elemen yang cocok dengan pemilih CSS

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia manipulasi DOM dengan JavaScript. Ingat, DOM adalah alat Anda untuk membuat halaman web dinamis dan interaktif. Itu seperti memiliki tongkat sihir yang dapat mengubah setiap bagian dari halaman web Anda!

Sekarang Anda teruskan perjalanan Anda, Anda akan menemukan banyak cara menarik untuk menggunakan DOM. Tetap berlatih, tetap bersemangat, dan jangan takut untuk mencoba. Sebelum Anda tahu, Anda akan membuat halaman web yang berdansa ke nada JavaScript Anda!

Happy coding, para ahli web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Metode DOM

Tutorial Selanjutnya:

JavaScript - Elemen DOM