Menambahkan Attribute dengan setNamedItem()

Dalam JavaScript, kita bisa menambahkan atau memperbarui atribut pada elemen HTML menggunakan berbagai metode. Salah satu cara yang bisa digunakan adalah dengan setNamedItem(). Metode ini digunakan dalam koleksi attributes, yang merupakan kumpulan atribut dalam elemen HTML.

Meskipun metode ini kurang populer dibandingkan setAttribute(), setNamedItem() tetap berguna dalam beberapa kasus di mana kita bekerja langsung dengan objek Attr dalam koleksi atribut elemen.

Cara Kerja setNamedItem()

Metode setNamedItem() digunakan untuk menambahkan atau mengganti atribut dalam elemen HTML menggunakan objek Attr.

Sintaks Dasar

element.attributes.setNamedItem(attrObj);

• element → Elemen HTML yang ingin dimodifikasi.
• attributes → Properti yang menyimpan koleksi semua atribut dalam elemen tersebut.
• setNamedItem(attrObj) → Menambahkan atau mengganti atribut dalam elemen dengan objek Attr.

Jika atribut yang diberikan sudah ada, maka nilainya akan diperbarui. Jika tidak ada, atribut baru akan ditambahkan ke elemen.

Contoh Penggunaan setNamedItem()

1. Menambahkan Atribut ke Elemen

Misalkan kita memiliki elemen berikut dalam HTML:

<p id="paragraf">Halo, dunia!</p>

Kita bisa menambahkan atribut class menggunakan setNamedItem():

const elemen = document.getElementById("paragraf");
const attrBaru = document.createAttribute("class");
attrBaru.value = "teks-utama";
elemen.attributes.setNamedItem(attrBaru);

Setelah kode ini dijalankan, elemen <p> akan memiliki atribut baru:

<p id="paragraf" class="teks-utama">Halo, dunia!</p>

2. Mengubah Nilai Atribut yang Ada

Jika atribut sudah ada dalam elemen, setNamedItem() akan memperbarui nilainya.

const elemen = document.getElementById("paragraf");
const attrClass = document.createAttribute("class");
attrClass.value = "teks-diperbarui";
elemen.attributes.setNamedItem(attrClass);

Sekarang atribut class berubah menjadi:

<p id="paragraf" class="teks-diperbarui">Halo, dunia!</p>

3. Menambahkan Beberapa Atribut Sekaligus

Kita juga bisa menambahkan beberapa atribut sekaligus menggunakan setNamedItem().

const elemen = document.getElementById("paragraf");

const attrClass = document.createAttribute("class");
attrClass.value = "teks-utama";

elemen.attributes.setNamedItem(attrClass);

const attrStyle = document.createAttribute("style");
attrStyle.value = "color: red; font-weight: bold;";
elemen.attributes.setNamedItem(attrStyle);

Hasilnya:

<p id="paragraf" class="teks-utama" style="color: red; font-weight: bold;">Halo, dunia!</p>

4. Memeriksa Atribut Sebelum Menambahkan

Agar lebih aman, kita bisa mengecek apakah atribut sudah ada sebelum menambahkannya.

const elemen = document.getElementById("paragraf");
if (!elemen.attributes.getNamedItem("data-info")) {
    const attrData = document.createAttribute("data-info");
    attrData.value = "informasi tambahan";
    elemen.attributes.setNamedItem(attrData);
    console.log("Atribut data-info ditambahkan.");
} else {
    console.log("Atribut data-info sudah ada.");
}

Perbandingan setNamedItem() vs setAttribute()

Perbedaan utama:

• setNamedItem() bekerja dengan objek Attr, sedangkan setAttribute() langsung menggunakan string.
• setAttribute() lebih mudah digunakan dalam kebanyakan kasus.

Contoh penggunaan setAttribute():

document.getElementById("paragraf").setAttribute("class", "teks-baru");

Cara ini lebih simpel dibanding setNamedItem().

Kapan Menggunakan setNamedItem()?

✅ Jika ingin menambahkan atau memperbarui atribut menggunakan objek Attr.
✅ Jika ingin bekerja dengan koleksi attributes dalam elemen.
✅ Jika perlu manipulasi lanjutan terhadap atribut sebelum menambahkannya.

❌ Jika hanya ingin menambahkan atribut secara langsung, lebih baik gunakan setAttribute().

Kesimpulan

• setNamedItem() digunakan untuk menambahkan atau mengganti atribut dalam elemen menggunakan objek Attr.
• Bisa digunakan untuk menambahkan satu atau beberapa atribut sekaligus.
• Jika ingin menambahkan atribut lebih cepat dan sederhana, gunakan setAttribute().
• Sebaiknya selalu memeriksa apakah atribut sudah ada sebelum menambahkannya untuk menghindari duplikasi.

Dengan memahami cara kerja setNamedItem(), kita bisa lebih fleksibel dalam mengelola atribut dalam elemen HTML menggunakan JavaScript. Yuk, langsung coba di proyekmu!