JavaScript - Dokumen Object

Hai, para pemrogram yang berambisi! Hari ini, kita akan masuk ke dunia yang menarik Object Dokumen JavaScript. Jangan khawatir jika Anda baru dalam pemrograman - Saya akan memandu Anda melalui perjalanan ini langkah demi langkah, seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Mari kita mulai petualangan ini bersama!

JavaScript - Document Object

Window Document Object

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

Imaginilah browser web Anda sebagai rumah. Objek Window mewakili seluruh rumah, sedangkan objek Dokumen seperti ruang utama di mana sebagian besar kegiatan terjadi. Semua yang Anda lihat di jendela browser Anda adalah bagian dari objek Window, dan konten halaman web khususnya adalah bagian dari objek Dokumen.

Ini adalah contoh sederhana untuk mengilustrasikan ini:

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

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

Properti Object Dokumen JavaScript

Sekarang kita mengerti di mana objek Dokumen berada, mari kita jelajahi beberapa propertinya. Properti ini memungkinkan kita untuk mengakses dan memanipulasi bagian yang 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 keseluruhan halaman Anda menjadi biru muda. cukup 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 Object Dokumen JavaScript

Metode seperti kekuatan super objek Dokumen kita. Mereka memungkinkan kita untuk melakukan semua sorts of 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 = "Hai, 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 membuat 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 membuat 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 pemilih CSS.

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

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

Daftar Properti Object Dokumen

Mari rangkum beberapa properti kunci Object Dokumen 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 diubah

Daftar Metode Object Dokumen

Dan di sini ada tabel dari beberapa metode Object Dokumen penting:

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

Ingat, belajar untuk memanipulasi Object Dokumen seperti belajar menjadi penyihir di dunia pengembangan web. Dengan alat ini, Anda dapat membuat halaman web Anda hidup dan merespon tindakan pengguna dalam banyak cara menakjubkan.

Saat kita menutup les ini, saya teringat murid saya yang tadinya takut dengan semua properti dan metode ini. Tetapi dengan latihan, dia menjadi sangat mahir hingga dia bisa memanipulasi halaman web dalam tidurnya! (Well, hampir.) Kunci adalah untuk mencoba dan bersenang-senang dengannya.

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

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 Tetingkap

Tutorial Seterusnya:

JavaScript - Objek Skrin