2022-02-19

DOM (Document Object Model)

Apa itu DOM

Document Object Model, yang lebih umum disebut sebagai DOM, adalah komponen kritis dalam pengembangan web. Ini adalah antarmuka pemrograman untuk dokumen HTML dan XML yang menyediakan representasi terstruktur dari dokumen dalam bentuk pohon. Artinya, setiap tag HTML diubah menjadi objek yang dapat kita manipulasi menggunakan bahasa pemrograman seperti JavaScript.

DOM sering digambarkan sebagai inti dari bahasa scripting web karena memiliki kemampuan untuk mengubah struktur, gaya, dan konten dokumen. Ketika sebuah halaman web dimuat, browser web secara otomatis membuat DOM, memungkinkan pengembang untuk memanipulasi konten halaman secara dinamis.

Dalam DOM, dokumen direpresentasikan sebagai node dan objek, yang membentuk struktur yang dikenal sebagai "pohon DOM". Struktur mirip dengan pohon ini memungkinkan bahasa pemrograman untuk mengakses dan memanipulasi setiap objek dalam dokumen. Objek-objek tersebut dapat ditambahkan, diubah, atau dihapus.

Dalam konteks JavaScript, setiap kali Anda berinteraksi dengan elemen dalam sebuah halaman web, Anda sedang berinteraksi dengan DOM. JavaScript memiliki kemampuan untuk menambahkan, mengubah, dan menghapus semua elemen dan atribut HTML dalam halaman. Ini juga dapat mengubah semua gaya CSS dalam halaman dan merespons semua peristiwa yang ada pada halaman.

Elemen-elemen DOM

Kita akan menjelajahi komponen-komponen penting dalam DOM - Node, Elemen, dan Atribut.

Node
Dalam DOM, segalanya adalah node. Seluruh dokumen adalah node dokumen, setiap tag HTML adalah node elemen, teks di dalam elemen HTML adalah node teks, dan bahkan komentar adalah node komentar.
Elemen
Elemen adalah jenis node; mereka ditentukan oleh tag awal, dapat berisi teks, elemen lain, atau keduanya, dan diakhiri dengan tag akhir. Misalnya, dalam <p>Halo, Dunia!</p>, <p> adalah tag awal, Halo, Dunia! adalah teks yang direpresentasikan sebagai node teks, dan </p> adalah tag akhir. Seluruh baris tersebut mewakili node elemen.
Atribut
Atribut memberikan informasi tambahan tentang sebuah elemen. Mereka selalu ditentukan dalam tag awal dan biasanya dalam bentuk pasangan nama/nilai seperti nama="nilai". Misalnya, dalam <a href="http://example.com">Ini adalah tautan</a>, href="http://example.com" adalah atribut dari elemen <a>.

Melintasi DOM

Traversing DOM adalah aspek fundamental dalam menggunakan JavaScript untuk memanipulasi halaman web. Melintasi melibatkan perpindahan melintasi pohon DOM, yang mencakup perpindahan ke atas (ke node induk), ke bawah (ke node anak), dan ke samping (ke node saudara) dari node saat ini.

Node Induk, Anak, dan Saudara

Setiap node dalam pohon DOM memiliki induk, kecuali node root. Node dapat memiliki beberapa node anak, dan node dengan induk yang sama disebut sebagai node saudara.

parentNode: Properti ini memungkinkan akses ke node induk dari node yang ditentukan.
childNodes: Properti ini mengembalikan koleksi node anak dari node yang ditentukan.
nextSibling dan previousSibling: Properti ini memungkinkan akses ke node saudara berikutnya dan sebelumnya dari node yang ditentukan, secara berturut-turut.

NodeList dan HTMLCollection

Beberapa metode untuk mengambil elemen-elemen DOM, seperti getElementsByClassName atau getElementsByTagName, mengembalikan beberapa elemen. Elemen-elemen ini dikembalikan sebagai NodeList atau HTMLCollection. Ini adalah koleksi mirip array dari node, tetapi bukan array sejati. Namun, mereka dapat diulang menggunakan perulangan for, atau diubah menjadi array untuk manipulasi yang lebih kompleks.

Memanipulasi DOM

Memanipulasi DOM melibatkan mengubah konten, struktur, atau gaya elemen HTML.

Membuat Elemen

JavaScript memungkinkan kita untuk membuat elemen secara dinamis dan menambahkannya ke halaman web kita. Ini dilakukan melalui metode seperti createElement(tagName), yang membuat elemen baru dengan tipe yang ditentukan oleh parameter tagName, dan createTextNode(data), yang membuat node teks baru yang berisi data yang ditentukan.

Memperbarui Elemen

Kita dapat mengubah konten elemen HTML dengan mengubah properti textContent atau innerHTML dari elemen tersebut. Kita juga dapat mengubah atribut elemen menggunakan metode setAttribute(name, value), di mana name adalah nama atribut dan value adalah nilai baru untuk atribut tersebut.

Menghapus Elemen

Elemen-elemen dapat dihapus dari DOM dengan memanggil metode removeChild(child) pada induk elemen yang akan dihapus, atau dengan langsung memanggil remove() pada elemen itu sendiri.

Peristiwa dalam DOM

Peristiwa berada di inti dari aplikasi web interaktif. Dalam DOM, peristiwa adalah sinyal bahwa sesuatu telah terjadi. Semua node DOM dapat menghasilkan peristiwa, dan JavaScript dapat bereaksi terhadap peristiwa-peristiwa tersebut melalui penggunaan Event Listener.

Jenis Peristiwa

Ada banyak jenis peristiwa yang dapat terjadi saat berinteraksi dengan sebuah halaman web. Beberapa peristiwa umum termasuk:

click: Dipicu ketika terdeteksi klik mouse.
mouseover: Dipicu ketika kursor bergerak di atas suatu elemen.
mouseout: Dipicu ketika kursor bergerak keluar dari suatu elemen.
keydown: Dipicu ketika sebuah tombol ditekan.
load: Dipicu ketika halaman telah sepenuhnya dimuat.

Pemantau Peristiwa

Pemantau peristiwa adalah fungsi-fungsi yang menunggu peristiwa tertentu terjadi, lalu dieksekusi. JavaScript menyediakan metode addEventListener(type, listener) yang melekatkan pemantau peristiwa pada sebuah elemen.

Propagasi Peristiwa: Bubbling dan Capturing

Propagasi peristiwa adalah proses di mana peristiwa bergerak atau menjalar melalui pohon DOM. Ini terjadi dalam dua fase:

Fase Capturing: Peristiwa bergerak ke bawah pohon DOM, dari objek dokumen ke elemen target.
Fase Bubbling: Peristiwa naik dari elemen target ke objek dokumen.

Anda dapat mengontrol fase di mana fungsi pemantau harus dijalankan dengan mengatur parameter useCapture dalam addEventListener().

API DOM Modern

Dengan perkembangan JavaScript dan DOM, muncul metode-metode baru yang lebih efisien untuk berinteraksi dengan DOM. Metode-metode ini lebih sederhana dan lebih kuat, membuat manipulasi DOM menjadi lebih lancar.

QuerySelector dan QuerySelectorAll

Metode querySelector() memungkinkan Anda menemukan elemen pertama yang cocok dengan sekumpulan pemilih yang ditentukan. querySelectorAll() mengembalikan semua elemen dalam dokumen yang cocok dengan sekumpulan pemilih yang ditentukan sebagai NodeList statis.

let el = document.querySelector(".my-class"); // gets first element with "my-class" class
let els = document.querySelectorAll(".my-class"); // gets all elements with "my-class" class

Fetch dan Promises

Fetch API memudahkan pengiriman permintaan web dan penanganan respons dibandingkan dengan XMLHttpRequest yang lebih lama. Ini dibangun di atas promises, yang mewakili nilai di masa depan - nilai yang mungkin belum dimuat namun akan terjadi nantinya.

Metode fetch() mengembalikan sebuah promise yang memenuhi dengan objek Respons yang mewakili respons dari permintaan tersebut. Promise ini dapat digunakan dengan .then() untuk menangani respons ketika sudah siap.