Memanipulasi Atribut: setAttribute, getAttribute, removeAttribute. buatkan gambar

Selain mengubah teks atau isi HTML, salah satu kekuatan utama DOM adalah kemampuan untuk mengubah atribut dari sebuah elemen (seperti src pada gambar, href pada link, atau class, id, dan disabled).

Untuk melakukan ini secara profesional, JavaScript menyediakan tiga metode utama: getAttribute, setAttribute, dan removeAttribute.

1. getAttribute()

Metode ini digunakan untuk mengambil nilai dari sebuah atribut yang ada pada elemen.

• Sintaks: elemen.getAttribute("nama-atribut")

• Contoh: Anda ingin mengecek link tujuan dari sebuah tag <a>.

const link = document.querySelector("a");
const url = link.getAttribute("href"); console.log(url); // Output: https://google.com (misalnya)

2. setAttribute()

Metode ini digunakan untuk menambah atribut baru atau mengubah nilai atribut yang sudah ada.

• Sintaks: elemen.setAttribute("nama-atribut", "nilai-baru")

• Contoh: Mengubah gambar secara dinamis (misal: fitur Dark Mode atau ganti avatar).

const gambar = document.getElementById("logo"); // Mengubah sumber gambar (src)
gambar.setAttribute("src", "logo-baru.png"); // Mengubah ukuran gambar
gambar.setAttribute("width", "300"); // Menambah atribut alt agar aksesibel
gambar.setAttribute("alt", "Logo Perusahaan");

3. removeAttribute()

Sesuai namanya, metode ini digunakan untuk menghapus atribut sepenuhnya dari sebuah elemen.

• Sintaks: elemen.removeAttribute("nama-atribut")

• Contoh: Mengaktifkan tombol yang sebelumnya dinonaktifkan (disabled).

const tombol = document.querySelector(".btn-submit"); // Menghapus atribut disabled agar tombol bisa diklik
tombol.removeAttribute("disabled");

Contoh Kasus Praktis: Fitur "Show/Hide Password"

Salah satu penggunaan manipulasi atribut yang paling umum adalah fitur untuk melihat kata sandi saat login.

const inputPassword = document.querySelector("#password");
const btnToggle = document.querySelector("#toggle"); btnToggle.addEventListener("click", () => { // Cek tipe atribut saat ini if (inputPassword.getAttribute("type") === "password") { // Jika password, ubah jadi text (terlihat) inputPassword.setAttribute("type", "text"); } else { // Jika sudah text, kembalikan ke password (tersembunyi) inputPassword.setAttribute("type", "password"); }
});

Ringkasan Perintah

Pro Tip: Dot Notation vs Method

Sebenarnya, Anda juga bisa memanipulasi atribut langsung menggunakan titik (misal: elemen.id = "baru"). Namun, menggunakan setAttribute jauh lebih direkomendasikan karena:

1. Bekerja untuk semua jenis atribut (termasuk atribut kustom/data-attribute).

2. Lebih konsisten dan eksplisit (jelas bahwa Anda sedang melakukan manipulasi DOM).