JavaScript - Objek Dokumen

Halo, para pemula pemrograman! Hari ini, kita akan melihat dunia menarik dari Objek Dokumen JavaScript. Jangan khawatir jika Anda baru saja memulai pemrograman - saya akan memandu Anda melalui perjalanan ini step by step, seperti yang telah saya lakukan untuk ribuan murid selama tahun-tahun mengajar. Mari kita mulai petualangan ini bersama!

JavaScript - Document Object

Objek Dokumen Window

Ketika Anda bekerja dengan JavaScript di browser web, salah satu hal paling penting yang Anda interaksi adalah Objek Dokumen. Tetapi sebelum kita masuk ke situ, mari kita pahami induknya: objek Window.

Bayangkan browser web Anda seperti sebuah rumah. Objek Window mewakili seluruh rumah, sedangkan objek Document seperti ruang utama di mana sebagian besar kegiatan terjadi. Semua yang Anda lihat di jendela browser adalah bagian dari objek Window, dan konten halaman web secara khusus adalah bagian dari objek Document.

Ini adalah contoh sederhana untuk mengilustrasikan ini:

console.log(window.document === document); // Output: true

Ini menunjukkan bahwa document sebenarnya adalah properti dari objek window, tetapi kita dapat mengaksesnya langsung sebagai document untuk keperluan praktis.

Properti Objek Dokumen JavaScript

Sekarang kita mengerti dimana objek Document berada, mari kita jelajahi beberapa propertinya. Properti ini memungkinkan kita untuk mengakses dan memanipulasi bagian-bagian berbeda dari halaman web kita.

1. document.title

Properti ini memungkinkan Anda untuk mendapatkan atau mengatur judul halaman web Anda - Anda tahu, teks yang muncul di tab browser.

console.log(document.title); // Mengoutputkan judul halaman saat ini
document.title = "Halaman Saya Menakjubkan"; // Mengubah judul halaman

2. document.body

Ini memberikan Anda akses ke elemen <body> dokumen HTML Anda.

document.body.style.backgroundColor = "lightblue";

Baris ini akan mengubah warna latar belakang seluruh halaman Anda menjadi biru muda. Sangat menarik, kan?

3. document.URL

Properti ini hanya bisa dibaca dan memberikan Anda URL lengkap halaman saat ini.

console.log(document.URL); // Mengoutputkan sesuatu seperti "https://www.example.com/page.html"

Metode Objek Dokumen JavaScript

Metode seperti superpower objek Document kita. Mereka memungkinkan kita untuk melakukan semua macam hal menarik dengan halaman web kita.

1. document.getElementById()

Ini mungkin metode yang Anda gunakan paling sering. Itu memungkinkan Anda untuk mengambil elemen dari HTML Anda menggunakan ID-nya.

let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "Halo, saya telah diubah oleh JavaScript!";

Dalam contoh ini, kita menemukan elemen dengan ID "mySpecialDiv" dan mengubah kontennya.

2. document.createElement()

Metode ini memungkinkan Anda untuk menciptakan elemen HTML baru dari awal!

let newParagraph = document.createElement("p");
newParagraph.textContent = "Saya adalah paragraf baru, senang bertemu Anda!";
document.body.appendChild(newParagraph);

Di sini, kita menciptakan elemen paragraf baru, mengatur teksnya, dan menambahkannya ke akhir body dokumen kita.

3. document.querySelector()

Metode ini yang kuat memungkinkan Anda untuk memilih elemen menggunakan selektor CSS.

let firstButton = document.querySelector("button");
firstButton.style.color = "red";

Ini akan menemukan tombol pertama di halaman Anda dan membuat teksnya merah.

Daftar Properti Objek Dokumen

Mari rangkum beberapa properti kunci objek Document dalam tabel praktis:

Properti	Deskripsi
document.title	Judul dokumen saat ini
document.body	Elemen `<body>`
document.head	Elemen `<head>`
document.URL	URL lengkap dokumen
document.domain	Nama domain server dokumen
document.lastModified	Tanggal saat dokumen terakhir dimodifikasi

Daftar Metode Objek Dokumen

Dan di sini ada tabel dari beberapa metode objek Document yang penting:

Metode	Deskripsi
document.getElementById()	Mengembalikan elemen dengan ID tertentu
document.getElementsByClassName()	Mengembalikan koleksi elemen dengan nama kelas tertentu
document.getElementsByTagName()	Mengembalikan koleksi elemen dengan nama tag tertentu
document.querySelector()	Mengembalikan elemen pertama yang cocok dengan selektor CSS
document.querySelectorAll()	Mengembalikan semua elemen yang cocok dengan selektor CSS
document.createElement()	Membuat elemen HTML baru
document.write()	Menulis ekspresi HTML atau kode JavaScript ke dokumen

Ingat, belajar untuk memanipulasi objek Document seperti belajar menjadi seorang ahli sihir di dunia pengembangan web. Dengan alat ini, Anda dapat membuat halaman web Anda hidup dan merespon tindakan pengguna dalam banyak cara menakjubkan.

Sekarang, saat kita menutup les ini, saya teringat tentang seorang murid yang pernah saya punya yang awalnya takut dengan semua properti dan metode ini. Tetapi dengan latihan, dia menjadi sangat mahir hingga dia bisa memanipulasi halaman web dalam tidurnya! (Well, hampir saja.) Kunci adalah untuk mencoba dan bersenang-senang dengan itu.

Jadi, murid-murid tercinta, jangan takut untuk bermain dengan konsep ini. Cobalah mengubah judul halaman ini, atau menciptakan elemen baru dan menambahkannya ke body. Semakin Anda berlatih, semakin hal ini akan menjadi alami. Sebelum Anda tahu, Anda akan menciptakan pengalaman web interaktif seperti seorang pro!

Selamat coding, dan ingat - di dunia pemrograman, kecurigaan adalah aset terbesar Anda. Terus menjelajahi, terus bertanya, dan terutama, terus coding!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Objek Jendela

Tutorial Selanjutnya:

JavaScript - Objek Layar