MENGUBAH ATRIBUT ELEMEN - DOM

Menyadari bagaimana mengubah atribut dari elemen HTML dengan menggunakan DOM dalam JavaScript bisa menjadi pengetahuan yang sangat bermanfaat. Kenalan dengan metode berikut agar kamu bisa memahami cara kerjanya.

Metode setAttribute()

Metode setAttribute() digunakan untuk menambah atau mengubah atribut dari elemen HTML yang dipilih. Metode ini menerima dua argumen, yaitu nama atribut dan nilainya.

Berikut adalah sintaks dari metode setAttribute():

element.setAttribute(name, value);

Contoh Penggunaan setAttribute()

Dalam contoh berikut, kita akan mengubah atribut src dari elemen <img>:

<img id="myImage" src="old_image.jpg">

var image = document.getElementById("myImage");
image.setAttribute("src", "new_image.jpg");

Setelah kode di atas dieksekusi, elemen img di HTML akan menjadi seperti ini:

<img id="myImage" src="new_image.jpg">

Metode getAttribute()

Selain mengubah atribut, kamu juga bisa mendapatkan nilai dari sebuah atribut dengan menggunakan metode getAttribute(). Metode ini hanya menerima satu argumen, yaitu nama atribut yang nilainya ingin kamu dapatkan.

Berikut adalah sintaks dari metode getAttribute():

var attributeValue = element.getAttribute(name);

Contoh Penggunaan getAttribute()

Mari buat contoh yang sama seperti sebelumnya. Kali ini, sebelum mengubah atribut src, kita akan mendapatkan nilainya terlebih dahulu:

<img id="myImage" src="old_image.jpg">

var image = document.getElementById("myImage");
var oldValue = image.getAttribute("src");

Setelah kode di atas dieksekusi, nilai dari variabel oldValue akan menjadi "old_image.jpg".