Document Object - Referensi javascript

Dalam JavaScript, istilah Document merujuk pada objek yang mewakili halaman web dan berisi properti dan metode untuk bekerja dengan elemen halaman tersebut. Objek ini dikenal dengan nama Document Object. Dalam tutorial ini, kita akan memahami lebih detail mengenai Document Object dan cara kerjanya.

Apa Itu Document Object?

Document Object adalah sebuah antarmuka pemrograman aplikasi (API) untuk berinteraksi dengan halaman web. Sebagai bagian dari objek window, Document Object digunakan untuk membuat, membaca, mengubah, dan menghapus elemen-elemen pada halaman HTML. Istilah ini sering digunakan ketika membahas konsep seperti DOM (Document Object Model), yang memodelkan struktur halaman web dan memungkinkannya diubah dengan JavaScript.

Bagaimana Cara Kerja Document Object?

Objek Document merupakan bagian integral dari model objek dokumen (DOM), yang memungkinkan manipulasi konten halaman web menggunakan JavaScript. Contoh sederhana dari penggunaan Document Object adalah ketika kamu ingin mengubah teks di dalam elemen Paragraph (<p>) di halaman HTML. Berikut adalah contoh penggunaannya:

document.body.innerHTML = '<p>Halo, dunia!</p>';

Dalam contoh di atas, document adalah referensi ke objek Document, body adalah metode yang meminta elemen <body> dari halaman, dan innerHTML digunakan untuk mengatur atau mendapatkan konten HTML dari elemen yang ditentukan.

Fungsi Dasar Document Object

Ada banyak metode dan properti yang bisa kamu gunakan dengan Document Object. Beberapa dari mereka adalah:

Mendapatkan Elemen

Untuk mendapatkan elemen dari halaman, kamu bisa menggunakan metode seperti getElementById(), getElementsByClassName(), dan getElementsByTagName(). Misalnya:

let elem = document.getElementById('myId');

Mengubah Konten

Kamu bisa mengubah konten elemen dengan menggunakan properti innerHTML seperti dijelaskan di atas.

Menambahkan dan Menghapus Elemen

Kamu bisa menambahkan elemen baru ke halaman dengan menggunakan metode createElement() dan appendChild(). Untuk menghapus elemen, kamu bisa menggunakan metode removeChild().

let newNode = document.createElement('p');
newNode.innerHTML = 'Ini adalah paragraf baru.';
document.body.appendChild(newNode);