Sign in Subscribe
Javascript

Cara Mengakses Attribute dengan getNamedItem()

Cara Mengakses Attribute dengan getNamedItem()
Photo by Pankaj Patel / Unsplash

Dalam JavaScript, kita bisa mengakses atribut dari elemen HTML menggunakan berbagai metode. Salah satu metode yang berguna untuk mengambil atribut dalam elemen adalah getNamedItem(). Metode ini bekerja dengan mengambil atribut berdasarkan nama dalam koleksi atribut elemen.

Metode ini termasuk dalam NamedNodeMap, yang memungkinkan kita mengakses atribut dalam elemen tanpa perlu menggunakan getAttribute(). Meskipun tidak sepopuler getAttribute(), getNamedItem() berguna dalam beberapa skenario khusus.

Cara Kerja getNamedItem()

Metode getNamedItem() digunakan untuk mengambil atribut tertentu dalam elemen berdasarkan namanya.

Sintaks Dasar

element.attributes.getNamedItem("nama-atribut");
  • element → Elemen HTML yang ingin diakses.
  • attributes → Properti yang menyimpan semua atribut dalam elemen tersebut.
  • getNamedItem("nama-atribut") → Mengambil objek atribut berdasarkan nama.

Jika atribut yang diminta tidak ditemukan, metode ini akan mengembalikan null.

Contoh Penggunaan getNamedItem()

1. Mengambil Nilai Atribut dalam Elemen

Misalkan kita punya elemen berikut dalam HTML:

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

Kita bisa mengambil atribut tertentu menggunakan getNamedItem():

const elemen = document.getElementById("paragraf");
const atributClass = elemen.attributes.getNamedItem("class");
console.log(atributClass.value);

Output:

teks-utama

2. Mengubah Nilai Atribut

Selain mengambil, kita juga bisa mengubah nilai atribut dengan getNamedItem().

const elemen = document.getElementById("paragraf");
elemen.attributes.getNamedItem("style").value = "color: red;";

Setelah kode dijalankan, warna teks dalam elemen <p> akan berubah menjadi merah.

3. Memeriksa Apakah Atribut Ada dalam Elemen

Sebelum mengambil atribut, kita bisa memeriksa apakah atribut tersebut ada atau tidak.

const elemen = document.getElementById("paragraf");
if (elemen.attributes.getNamedItem("class")) {
    console.log("Atribut class ditemukan!");
} else {
    console.log("Atribut class tidak ada!");
}

Jika atribut ditemukan, maka output akan:

Atribut class ditemukan!

Jika atribut tidak ada, maka akan mencetak:

Atribut class tidak ada!

Perbandingan getNamedItem() vs getAttribute()

Metode getAttribute() lebih umum digunakan karena langsung mengembalikan nilai atribut sebagai string.

const elemen = document.getElementById("paragraf");
console.log(elemen.getAttribute("class")); // Output: teks-utama

Sedangkan getNamedItem() mengembalikan objek Attr, bukan hanya nilai atributnya.

const elemen = document.getElementById("paragraf");
console.log(elemen.attributes.getNamedItem("class"));

Hasilnya akan berupa:

Attr {name: "class", value: "teks-utama"}

Jika kita hanya perlu mengambil nilai atribut, lebih baik gunakan getAttribute(). Namun, jika ingin mengakses atribut sebagai objek, gunakan getNamedItem().

Kapan Menggunakan getNamedItem()?

✅ Jika ingin mendapatkan atribut sebagai objek Attr.
✅ Jika ingin mengambil dan langsung mengedit atribut tanpa menggunakan setAttribute().
✅ Jika bekerja dengan koleksi atribut dalam elemen.

❌ Jika hanya ingin mendapatkan nilai atribut dalam bentuk string, lebih baik gunakan getAttribute().

Kesimpulan

  • getNamedItem() digunakan untuk mengambil atribut dalam elemen berdasarkan nama dan mengembalikannya sebagai objek Attr.
  • Bisa digunakan untuk mengambil, memodifikasi, atau memeriksa atribut elemen.
  • Lebih fleksibel dibanding getAttribute(), tetapi tidak selalu diperlukan dalam kasus sederhana.
  • Jika hanya butuh nilai atributnya, gunakan getAttribute(), tetapi jika perlu akses lebih dalam terhadap atribut, gunakan getNamedItem().

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

Read next