Web Programming
Week 01
JavaScript
DOM pada JS

JavaScript HTML DOM

Fungsi DOM pada JavaScript adalah untuk memanipulasi halaman website menjadi lebih dinamis, dengan cara mengambil, mengubah, menambah, maupun menghapus elemen HTML.

Mengakses Element HTML

Ada beberapa cara yang dapat dilakukan:

Dengan ID

Menggunakan method getElementByID(). contoh:

let umurA = document.getElementById("umur").value;

JavaScript DOM akan mengambil element html yang memiliki ID umur lalu disimpan ke variabel umurA.

Dengan class

Menggunakan method getElementsByClassName( ). contoh:

let semuaClassHeader = document.getElementsByClassName("header");

disini DOM JavaScript bisa mengambil semua elemen di bawah Class header. Untuk mengakses masing-masing element bisa menggunakan index, seperti array dalam mengakses element

Dengan nama tag

Menggunakan method getElementsByTagName( ). contoh:

let tagH1 = document.getElementsByTagName("h1");

Semua element dengan tag h1 akan diambil. Untuk mengakses masing-masing element bisa menggunakan index.

Dengan query selector dan query selector all

Menggunakan method querySelector( ) untuk query selector dan method querySelectorAll( ) untuk query selector all.

Query Selector

let queryP = document.querySelector("p");

Query Selector All

let queryAllP = document.querySelectorAll("p");

Perbedaan utama antara keduanya adalah dalam jumlah elemen yang diambil. querySelector() mengambil elemen pertama yang cocok, sedangkan querySelectorAll() mengambil semua elemen yang cocok.

Mengubah Element HTML

Untuk mengubah konten HTML dapat dilakukan dengan innerHTML, yang biasanya dikombinasikan dengan method-method untuk pemanggilan element. contoh :

html
<p id="demo">Hello, World!</p>
js
let demo = document.getElementById("demo");
demo.innerHTML = "Halo, Dunia!";

Output :

Halo, Dunia!

Jika dilihat di website, element dengan id demo akan berubah menjadi “Halo, Dunia!”.

Selain itu, dengan bentuk element.attribute dapat dilakukan pengambil/pengubahan/penambahan nilai attribute dari sebuah element. Contoh :

document.getElementsByTag("img").src = "image.jpg";

Maka, value src dari atribut img akan menjadi "image.jpg" atau dapat juga dilakukan dengan cara :

let gambar = document.getElementsByTag("img");
gambar.setAttribute("src", "image.jpg");

Berikutnya, dapat juga dilakukan pengambilan/pengubahan/penambahan CSS dari element HTML dengan bentuk :

document.getElementById(id).style.property = new style();

Contoh:

document.getElementsByTag(“h1”).style.color = “blue”

Maka semua element dengan tag h1 akan berubah warna tulisannya menjadi biru pada halaman website.

Menambah dan Menghapus Element HTML

MethodDeskripsi
createElement(element)Membuat elemen baru
removeChild(element)Menghapus elemen
appendChild(element)Menambah elemen
replaceChild(newElement, oldElement)Mengganti elemen
write(text)Menulis ke dalam HTML

Event Handlers

Event Handlers

DOM pada JavaScript dapat digunakan untuk event handling. Ada beberapa event yang bisa ditemukan pada website, yaitu:

  • onchange
  • onclick
  • onmouseover
  • onmouseout
  • onkeydown
  • onload

Misalnya untuk onclick, yaitu Event yang akan terjadi saat user klik suatu element HTML.

document.getElementById("tombol").onclick = function () {
  alert("Anda telah mengklik tombol!");
};

Pada contoh diatas, kita memiliki sebuah tombol dengan ID "tombol". Ketika tombol tersebut diklik oleh pengguna, maka event onclick akan terjadi, dan pesan "Anda telah mengklik tombol!" akan muncul dalam sebuah alert.

If Else pada JSTailwindCSS Introduction