Sekarang kita sudah memahami bahasa JavaScript dan mengerti peran penggunaannya dalam browser melalui objek window. Tetapi ada satu hal lagi yang belum kita ketahui, yakni cara mengakses elemen pada dokumen HTML.

Pada materi kali ini kita akan eksplorasi tentang DOM Scripting, di mana nantinya kita dapat memanipulasi elemen, atribut elemen, dan teks yang tampak pada halaman.


Apa itu DOM?

Sebelumnya disebutkan DOM Scripting, tapi sebenarnya apa itu DOM? Document Object Model (DOM) memberikan kita jalan untuk mengakses dan memanipulasi konten pada dokumen. DOM merupakan application programming interface (API) untuk HTML, XML atau SVG. Dengan DOM berkas HTML dapat direpresentasikan dalam bentuk objek yang dapat diakses oleh JavaScript (sebenarnya tidak hanya oleh JavaScript. DOM juga dapat diakses oleh bahasa pemrograman lain). Melalui DOM inilah JavaScript dapat memanipulasi elemen beserta atributnya pada HTML.

Struktur objek DOM digambarkan seperti struktur node tree (pohon simpul). Disebut pohon karena strukturnya seperti pohon dengan batang induk tunggal yang bercabang menjadi beberapa cabang anak, masing-masing memiliki daun. Pada kasus ini induk tunggal batang merupakan elemen <html>, cabangnya merupakan anak elemen di dalamnya, dan daun adalah konten di dalam elemen tersebut.

Mari kita ambil contoh pada struktur HTML berikut:

 1
     2
     3
     4
     5
     6
     7
     8
     9
    10
<!DOCTYPE html>
    <html>
       <head>
           <title>DOM Structure</title>
       </head>
       <body>
           <h1>Hallo Developer!</h1>
           <p>Belajar Dasar Pemrograman Web</p>
       </body>
    </html>

Berdasarkan HTML di atas, maka objek DOM memiliki struktur seperti ini:


Pada contoh yang diberikan di atas DOM terlihat seperti pemetaan dari sumber berkas HTML. Walaupun sama, berkas HTML dan DOM adalah hal yang berbeda.

Walaupun struktur dari DOM terbentuk berdasarkan berkas HTML, tetapi terdapat kasus tertentu yang menyebabkan struktur DOM berbeda dengan struktur HTML. Yakni kasus di mana kita terdapat kesalahan dalam menuliskan kode HTML.

Mari kita lihat contohnya seperti berikut:

1
    2
    3
    4
<!DOCTYPE html>
    <html>
    Hello, World!
    </html>

Pada berkas HTML di atas tidak terdapat elemen <head> dan <body>. Artinya berkas HTML tersebut tidak valid. Berbeda dengan DOM, walaupun struktur pada HTML tidak valid, pada DOM object structure akan diperbaiki. Caranya dengan menambahkan elemen <head> dan <body> secara otomatis kemudian menempatkan teks di dalam elemen <body>.


Mendapatkan Elemen

Untuk mengakses elemen melalui DOM, kita gunakan properti dari objek window yang dinamakan dengan document. Objek document merepresentasikan dokumen dari HTML atau keseluruhan halaman yang terlihat pada jendela browser. Jika kita lihat nilai dari objek document pada browser console akan tampak seperti ini:


Pada gambar di atas kita bisa lihat bahwa nilai dari document merupakan struktur HTML dari halaman yang ditampilkan, di mana terdapat root element <html> yang di dalamnya ada elemen <head> dan <body>.

Meskipun nilai objek document terlihat hanya seperti struktur HTML saja, namun objek document memiliki beberapa standar properti dan method yang digunakan untuk mengakses koleksi elemen di dalamnya. Contohnya kita dapat mendapatkan elemen <head> yang diakses melalui properti head dari objek document.

1
const head = document.head;


Begitu juga sama halnya dengan mendapatkan elemen <body> dengan properti body seperti berikut.

1
const body = document.body;


Untuk mendapatkan seluruh elemen yang memiliki class “button” kita gunakan method document.querySelectorAll(".button"); sehingga method tersebut akan mengembalikan banyak elemen dengan class button.


Karena HTMLCollection mirip seperti array yang dapat menampung banyak data di dalamnya, HTMLCollection juga memiliki karakteristik mirip seperti array. HTMLCollection memiliki properti length untuk mendapatkan jumlah elemen yang ditampung. Untuk mengakses nilai individual elemennya menggunakan indexing.


Kita juga dapat melakukan perulangan menggunakan for of pada HTMLCollection:

1
    2
    3
for (let item of buttons) {
      console.log(item);
    }


Dalam menggunakan method querySelector() tentu kita menggunakan query dalam menentukan target elemen. Untuk menargetkan elemen berdasarkan attribute class, kita gunakan tanda “.”, sedangkan jika kita menargetkan dengan menggunakan id, gunakan tanda “#”.

Selain querySelector() masih terdapat method lain yang sudah disebutkan sebelumnya untuk mendapatkan elemen secara spesifik, Anda bisa mencoba sendiri method tersebut pada console browser, dan carilah perbedaan fungsi dari masing-masing method-nya.


Memanipulasi Element

Setelah kita tahu cara mengakses elemen melalui objek document, sekarang saatnya kita belajar cara memanipulasi elemen yang didapat, seperti mengubah konten, menambahkan atau mengubah nilai atribut, dan menambahkan action/event pada elemen.


Memanipulasi Atribut

Untuk mengubah atau menambah nilai atribut pada elemen, apa method yang kita gunakan? setAttribute() jawabannya. Method ini membutuhkan dua buah argumen string yang merupakan nama dan nilai dari atributnya.

1
someElement.setAttribute("attributName", "attributeValue");

Mari kita ambil contoh. Terdapat struktur web sebagai berikut:

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
<!DOCTYPE html>
        <html>
        <head>
           <title>Manipulating Attribute</title>
        </head>
        <body>
        <figure>
           <img id="catImage" src="https://i.ibb.co/9WT6LG6/two-three.jpg" alt="three-cats" width="600px"/>
           <figcaption id="caption">Tiga Anak Kucing</figcaption>
        </figure>
        </body>
        </html>

Kita buka berkas HTML tersebut pada browser, maka akan muncul tampilan seperti ini:


Ada yang janggal pada informasi yang ditampilkan di website. Berdasarkan caption, gambar seharusnya menampilkan 3 ekor kucing. Kita akan coba memperbaikinya dengan mengubah nilai atribut src pada elemen <img id=”catImage”> melalui JavaScript. Kita bisa melakukannya dengan menuliskan kode seperti berikut:

1
        2
let catImage = document.querySelector("#catImage");
        catImage.setAttribute("src", "https://i.ibb.co/55VG7vL/three-cat.jpg");

Jalankan kode berikut pada console browser kemudian gambar pada halaman akan berubah.


Selain mengatur nilai atribut elemen, kita juga dapat mengambil nilai dari atribut elemen yang sedang diterapkan dengan menggunakan method getAttribute(). Method tersebut membutuhkan satu buah argumen string yang merupakan nama atribut dan akan mengembalikan nilai dari atribut tersebut. Contoh:

1
catImage.getAttribute("src");


Memanipulasi Konten Elemen

Dengan JavaScript juga kita dapat mengubah konten yang ada di dalam HTML. Konten pada elemen disimpan di dalam properti innerHTML (konten dalam bentuk HTML) atau innerText (konten dalam bentuk Teks). Hasilnya, dalam memanipulasi konten kita dapat melakukannya dengan mengubah nilai dari properti tersebut.

1
        2
let caption = document.querySelector("#caption");
        caption.innerHTML = '<em>Tiga Anak Kucing</em>'


Lihat perubahan terjadi pada caption gambar! Sekarang caption gambar tampak miring karena kita membungkus teks dalam elemen emphasize. Kita dapat memberikan nilai HTML pada konten elemen dengan menggunakan properti innerHTML.

Berbeda ketika kita menggunakan innerText, nilai apapun yang terdapat pada properti ini adalah merupakan sebuah teks. Sehingga walaupun kita menginisialisasi teks yang merupakan sebuah tag html, maka teks tersebut akan tampil apa adanya tanpa terformat sebagai HTML.

1
caption.innerText = "<em>Tiga Anak Kucing</em>";


Jadi pastikan kita tidak salah menggunakan properti ketika ingin mengubah konten dari elemen.


Membuat dan Menambahkan Elemen Baru

Sebenarnya terdapat beberapa cara dalam membuat elemen HTML baru menggunakan JavaScript. Bahkan kita bisa gunakan langsung properti innerHTML dengan menuliskan langsung tag HTML-nya kemudian menggabungkan dengan nilai yang ada pada elemen (appending). Tapi ini bukan pendekatan yang baik.

Dalam membuat elemen baru, DOM telah menyediakan method yang bernama createElement().

1
let newElement = document.createElement('p');


Dengan menjalankan perintah tersebut maka terciptalah elemen paragraf baru yang diinisialisasi pada variabel newElement.

Pada variabel newElement kita dapat memberikan nilai konten dengan menggunakan properti innerHTML ataupun innerText.

1
newElement.innerHTML = 'Anda menekan gambar kucing sebanyak <span id="count">0</span> kali';


Walaupun sekarang variabel newElement sudah memiliki konten di dalamnya, tetapi mengapa belum muncul pada jendela browser? Hal tersebut karena fungsi createElement() hanya akan membuat sebuah elemen baru, tidak berarti ia akan memasukkannya ke dalam document.body.

Agar elemen baru tampil pada jendela browser, kita perlu memasukkan elemen tersebut pada body dengan menggunakan fungsi appendChild();

1
document.body.appendChild(newElement);

Sekarang elemen baru yang kita buat sudah tampil pada jendela browser.


Menambahkan Aksi (Event) pada Element

Selain mampu mengakses elemen dalam bentuk objek pada halaman, JavaScript juga mampu menerima event atau kejadian yang terjadi pada elemen. Hal tersebut dinamakan Event Handler. Event bisa berupa interaksi dari pengguna seperti click, atau sekedar mengarahkan kursor pada elemen. Dengan menerapkan event handler, kita dapat menjalankan suatu fungsi tertentu ketika event terjadi pada elemen.

Untuk menambahkan Event Handler pada elemen kita gunakan method, addEventListener() pada target element. Method ini membutuhkan setidaknya dua buah argument.

Yang pertama adalah sebuah string sebagai tipe event-nya. Ada banyak sekali tipe event yang dapat digunakan pada method addEventListener(), Anda bisa melihat secara lengkap pada tautan berikut: https://developer.mozilla.org/en-US/docs/Web/Events. Salah satu yang banyak digunakan adalah “click”. Event ini akan membaca kejadian dimana pengguna melakukan click pada element.

Kemudian yang kedua adalah sebuah fungsi yang akan dijalankan ketika event terjadi. Pada fungsi ini kita dapat memberikan sebuah argumen yang merupakan object yang berisikan informasi tentang action yang terjadi. Termasuk informasi mengenai target elemen event-nya (event.target). Argumen ini biasanya diberikan nama “event”.

Lihat kode berikut untuk menerapkan addEventListener() pada sebuah elemen.

1
    2
    3
catImage.addEventListener('click', function(event) {
       document.querySelector('#count').innerText++;
    });

Dengan menjalankan kode tersebut pada latihan sebelumnya, berarti kita memberikan sebuah event ‘click’ pada elemen catImage. Ketika gambar kucing ditekan akan menjalankan fungsi yang menambahkan nilai konten pada elemen dengan id count.


Seperti itulah dasar-dasar dalam memanipulasi DOM dengan menggunakan JavaScript. Untuk mengimplementasikan apa yang sudah kita pelajari, pada materi selanjutnya kita akan coba terapkan logika pada Web Kalkulator agar dapat berfungsi dengan baik.


Sebelumnya : Browser Object Selanjutnya : Menerapkan JavaScript pada Web Kalkulator