DOM Manipulation, Kunci dari Website yang Interaktif

“DOM atau Document Object Model merupakan objek JavaScript spesial yang hanya ada di environment Browser. Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya.”

Pengembangan website atau yang biasa dikenal dengan istilah web development merupakan sebuah proses mulai dari perancangan, pembangunan, dan pengoptimasian sebuah website hingga berjalan sesuai fungsinya. Dalam pengembangannya, developer memerlukan setidaknya dua bahasa markup, yakni HyperText Markup Language (HTML) dan Cascading Style Sheet (CSS). Selain itu, terdapat perkakas lain yang membuat website menjadi interaktif dan dinamis, yaitu JavaScript.

Nah, kali ini kita akan membahas mengenai salah satu hal guna memanipulasi struktur HTML menggunakan JavaScript, yaitu Teknik Manipulasi DOM. Sebelum itu, kita perlu berkenalan dulu dengan DOM.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Apa Itu DOM?

Document Object Model atau disingkat DOM adalah sebuah programming interface (API) untuk web dokumen. DOM merepresentasikan struktur dan konten dari dokumen web dalam bentuk node dan object supaya kita dapat mengubah struktur, style, dan konten dari dokumen tersebut. Pada dasarnya, DOM merepresentasikan struktur dokumen dalam bentuk tree (pohon) seperti berikut.

Mengakses DOM

DOM dapat dimanipulasi menggunakan bahasa scripting atau bahasa pemrograman, yaitu JavaScript. Kode JavaScript yang dijalankan di browser environment akan memiliki akses terhadap objek document dan window untuk memanipulasi DOM. Dengan demikian, dokumen web dapat terhubung atau berinteraksi dengan scripts atau bahasa pemrograman.

Beberapa contoh manipulasi dokumen HTML di antaranya, seperti membuat, mengubah, atau menghilangkan element. Terdapat dua cara untuk membuat kode script di halaman web, yaitu membuatnya secara inline di element dan memasukkannya di halaman web. Berikut cara mengakses script di dalam elemen dokumen HTML.

Secara Inline pada elemen tertentu.

1	<body onload="console.log('Hello World!')">

Menghubungkan script dalam elemen <script>.

<html>

<head>

<title>Script External</title>

// Jalankan kode di dalam function ketika dokumen selesai dimuat

window.addEventListener('load',() => {

// Membuat beberapa elemen dan menyematkan di dalam halaman web

const heading = document.createElement('h1');

const headingText = document.createTextNode('Hello World!');

heading.appendChild(headingText);

document.body.appendChild(heading);

});

</script>

</head>

<body>

</body>

</html>

Menghubungkan script eksternal dengan dokumen HTML.

<html>

<head>

<title>Script External</title>

</head>

<body>

</body>

</html>

// script.js

window.addEventListener('load',() => {

// Membuat beberapa elemen dan menyematkan di dalam halaman web

const heading = document.createElement('h1');

const headingText = document.createTextNode('Hello World!');

heading.appendChild(headingText);

document.body.appendChild(heading);

});

Kedua cara di atas dapat diterapkan untuk mengakses DOM. Namun, inline bukanlah cara yang direkomendasikan karena kita akan menggabungkan kode JavaScript dengan struktur dokumen HTML sehingga lebih memudahkan proses pengembangan (development) atau pemeliharaan (maintenance) proyek yang kompleks.

Menangkap Element HTML pada DOM

Untuk melakukan manipulasi elemen di halaman web, kita perlu menangkap elemen yang dituju. Langkah ini tidak bisa digunakan dengan teknik inline, melainkan dengan method atau function dari object document. Terdapat beberapa method yang dapat digunakan dengan menyesuaikan kondisi yang ada. Silakan simak tabel berikut ini.

No	Method	Keterangan
1	getElementById(<id>)	Mengembalikan object yang merepresentasikan elemen yang ditangkap dan properti id-nya cocok dengan tag HTML yang dituju.
2	getElementsByClassName(<names>)	Mengembalikan HTMLCollection dari seluruh elemen yang memiliki class name sesuai.
3	getElementsByTagName(<name>)	Mengembalikan HTMLCollection of object dari seluruh elemen dengan nama elemen (tag element) yang sesuai.
4	querySelector(<query_selector>)	Mengembalikan elemen pertama di dalam dokumen yang cocok dengan selector spesifik. Jika tidak, akan mengembalikan nilai null.
5	querySelectorAll(<query_selector>)	Mengembalikan kumpulan node (NodeList) di dalam dokumen sesuai dengan selector yang spesifik.

Membuat dan Menyematkan Elemen Baru

Terkadang kita perlu membuat elemen baru untuk membuat halaman web dinamis. Oleh karena itu, kita perlu memanfaatkan method createElement() dari objek document. Method ini digunakan untuk membuat elemen baru dengan menyertakan nama tag spesifik yang dituju sebagai parameter.

Setelah elemen baru terbuat, tentu kita tidak ingin konten elemen tersebut kosong. Untuk itu, kita bisa memanfaatkan append() dan appendChild(). Method append() yang menerima argument bertipe Node atau string, sedangkan jika kita ingin menyematkan elemen lain sebagai child dari elemen tersebut, gunakanlah appendChild().

Berikut contoh kasus pembuatan dan penyematan elemen baru.

<!DOCTYPE html>

<html>

<head>

<title>Membuat dan Menyematkan Elemen</title>

</head>

<body>

<p>Teks dibawah dibuat secara dinamis.</p>

const newParagraph = document.createElement('p');

const newContent = document.createTextNode('Hallo!');

newParagraph.appendChild(newContent);

document.body.appendChild(newParagraph);

</script>

</body>

</html>

Memanipulasi Atribut Elemen

Suatu elemen yang telah terdaftar dalam DOM Tree terkadang perlu mengutak-atik atribut dari elemen tersebut agar tampilan lebih dinamis. Contohnya seperti mengubah resource dari elemen <img> agar gambar yang ditampilkan dapat berubah. Untuk mencapai ini, kita memerlukan method setAttribut() dari objek bertipe Element. Method ini menerima dua parameter, yaitu nama atribut dan value dari atribut itu sendiri.

Berikut contoh implementasi manipulasi atribut elemen <img>.

<!DOCTYPE html>

<html>

<head>

<title>Element Attribute</title>

</head>

<body>

const image = document.getElementsByTagName('img')[0];

image.setAttribute('src', 'https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/image-assets/dicoding-logo.png');

</script>

</body>

</html>

Memanipulasi Style Elemen

Selain memanipulasi atribut elemen, kamu juga bisa memanipulasi style elemen untuk mendapat tampilan yang dinamis. Untuk melakukan manipulasi ini, kita bisa memanfaatkan interface CSSStyleDeclaration. Interface ini merepresentasikan object yang merupakan isi dari blok deklarasi di CSS.

Objek CSSStyleDeclaration dapat ditangkap menggunakan tiga cara sebagai berikut.

Melalui properti style dari objek HTMLElement.
Objek CSSStyleDeclaration ini merepresentasikan style yang diterapkan secara inline. Contoh: <p style=”color: blue”>.
Melalui interface CSSStyleSheet dari property style yang berada di objek CSSStyleRule.
Contoh: document.styleSheets[0].cssRules[0].style akan mengembalikan objek CSSStyleDeclaration pada berkas CSS pertama dan rule CSS pertama.
Melalui function getComputedStyle() dari objek window.
Method ini akan mengembalikan objek yang mengandung nilai-nilai seluruh properti CSS dari elemen tertentu setelah menerapkan CSS yang dituliskan dan menghitung komputasi dasar dari nilai yang tersedia.

Menambahkan Event pada Elemen

Event merupakan hal yang tidak bisa dipisahkan ketika kita ingin membuat halaman website yang interaktif. Event ini adalah kemampuan JavaScript untuk menerima keadaan atau kejadian dari suatu elemen. Event dapat dipicu dengan aksi user, seperti mengeklik tombol mouse, menekan tombol keyboard, dsb. Selain itu, Event juga bisa dipicu secara terprogram, seperti memanggil HTMLElement.click() dari elemen atau mendefinisikan event dan mengirimnya ke target menggunakan method EventTarget.dispatchEvent().

Untuk menerapkan event handler pada elemen, terdapat interface yang telah diimplementasikan pada interface Node sehingga Node beserta turunannya (document, window, HTMLElement, dsb) dapat menerapkan event, yaitu interface EventTarget. Contohnya adalah menerapkan method addEventListener(). Method ini merupakan salah satu method dari interface EventTarget guna menyiapkan function yang akan dipanggil kapan pun event tersebut dipicu pada elemen target.

Berikut contoh penerapan event pada target event.

<!DOCTYPE html>

<html>

<head>

<title>Event</title>

</head>

<body>

<br>

<button type="button">Click Me!</button>

const btn = document.querySelector('button');

function random(number) {

return Math.floor(Math.random() * (number+1));

}

btn.addEventListener('click', () => {

const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;

document.body.style.backgroundColor = rndCol;

});

</script>

</body>

</html>

Kesimpulan

Teknik manipulasi DOM merupakan teknik yang sangat penting dalam pengembangan website untuk meningkatkan interaktivitas dan kedinamisan. Ada banyak teknik untuk memanipulasinya, seperti membuat elemen baru, menyisipkan elemen, mengubah atribut, mengubah style, menambahkan event, dsb. Pada blog ini, materi yang disampaikan hanyalah permukaannya saja. Untuk memperdalam materi ini, kamu bisa bergabung di kelas Belajar Membuat Front-End Web untuk Pemula dengan berlangganan di Dicoding Academy secara langsung. Selain itu, kamu juga bisa mempelajari kelas lanjutan terkait Front-End Web sehingga keilmuanmu dapat bersaing secara global.

Oke, sampai di sini dulu pembahasan terkait teknik manipulasi DOM. Pembahasan apa lagi nih yang ingin kamu dapatkan? Silakan tulis di kolom komentar di bawah, ya! Sampai jumpa di artikel blog berikutnya.