Panduan Pemula untuk DOM Document JavaScript

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan memulai perjalanan menarik ke dunia JavaScript dan Document Object Model (DOM). Jangan khawatir jika istilah ini terdengar menakutkan - pada akhir panduan 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 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 menambahkan jendela baru setelah rumah sudah dibangun? Itu adalah tempat DOM berperan!

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

Objek Document

Di akar pohon ini adalah objek document. Itu seperti fondasi rumah kita - semua hal 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 paragraf.</p>
</body>
</html>

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

Mengakses Objek Dokumen DOM

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 melihat pandangan burung dari rumah kita!

Properti Objek Dokumen DOM

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

Properti `childElementCount`

Properti childElementCount mengembalikan jumlah elemen anak yang dimiliki sebuah elemen. Untuk objek dokumen, itu mengembalikan jumlah anak langsung 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 Anda 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, mengatur konten teksnya, dan menambahkannya ke akhir <body>. Itu seperti menambahkan ruangan baru ke rumah Anda dengan JavaScript!

Metode Umum Dokumen DOM

Berikut adalah tabel dari beberapa metode dokumen DOM umum:

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 ajaib yang dapat mengubah bagian mana saja dari halaman web Anda!

Sebagai Anda terus melanjutkan perjalanannya, Anda akan menemukan banyak cara menarik untuk menggunakan DOM. Tetap latih, tetap curiga, dan jangan takut untuk mencoba. Sebelum Anda sadari, Anda akan membuat halaman web yang berdansa ke nada JavaScript Anda!

Selamat coding, para ahli web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Kaedah DOM

Tutorial Seterusnya:

JavaScript - Elemen DOM