Sign in Subscribe
Javascript

Memahami dan Menggunakan Attribute item()

Memahami dan Menggunakan Attribute item()
Photo by Caspar Camille Rubin / Unsplash

Dalam JavaScript dan DOM (Document Object Model), elemen HTML memiliki berbagai atribut yang bisa diakses dan dimanipulasi. Salah satu metode yang digunakan untuk mengambil atribut dalam koleksi atribut adalah item(). Metode ini berguna untuk mendapatkan atribut berdasarkan indeksnya dalam daftar atribut sebuah elemen.

Meskipun metode ini tidak terlalu sering digunakan dibanding getAttribute(), item() tetap memiliki kegunaan dalam kasus-kasus tertentu, terutama ketika kita ingin mengambil atribut dengan cara iteratif.

Cara Kerja item()

Metode item() digunakan untuk mengambil atribut dari elemen berdasarkan indeks dalam daftar atributnya.

Sintaks Dasar

element.attributes.item(index);
  • element → Elemen HTML yang ingin kita akses.
  • attributes → Properti yang menyimpan koleksi semua atribut dalam elemen tersebut.
  • item(index) → Mengambil atribut berdasarkan posisi indeks.

Karena attributes mengembalikan NamedNodeMap (bukan array biasa), metode item() menjadi cara alternatif untuk mengakses atribut dalam daftar ini.

Contoh Penggunaan item()

1. Mengambil Atribut dengan item()

Misalkan kita punya elemen berikut dalam HTML:

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

Kita bisa mengambil atribut dalam elemen <p> menggunakan item():

const elemen = document.getElementById("paragraf");
const atributPertama = elemen.attributes.item(0);
console.log(atributPertama.name + " = " + atributPertama.value);

Jika elemen memiliki tiga atribut (id, class, dan style), outputnya akan menjadi:

id = paragraf

Karena item(0) mengambil atribut pertama dalam daftar.

2. Mengakses Semua Atribut dalam Elemen

Kita bisa menggunakan loop untuk mendapatkan semua atribut dalam elemen tersebut.

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

for (let i = 0; i < atributList.length; i++) {
    console.log(atributList.item(i).name + " = " + atributList.item(i).value);
}

Jika elemen <p> memiliki atribut seperti ini:

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

Maka outputnya akan:

id = paragraf
class = teks-utama
style = color: red;

3. Perbandingan item() dengan getAttribute()

Metode getAttribute() lebih sering digunakan karena langsung mengambil nilai atribut berdasarkan nama.

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

Namun, jika kita ingin mengakses semua atribut tanpa mengetahui namanya terlebih dahulu, item() lebih berguna.

Kapan Menggunakan item()?

✅ Jika ingin mengambil semua atribut dalam elemen secara iteratif. ✅ Jika tidak tahu nama atribut yang ingin diakses. ✅ Jika bekerja dengan koleksi atribut secara dinamis.

❌ Jika hanya ingin mengambil satu atribut tertentu, lebih baik gunakan getAttribute().

Kesimpulan

  • item() digunakan untuk mengambil atribut berdasarkan indeks dalam daftar atribut elemen.
  • Cocok digunakan ketika kita ingin mengakses atribut secara iteratif.
  • Jika hanya perlu mengambil satu atribut tertentu, lebih baik gunakan getAttribute().
  • attributes mengembalikan NamedNodeMap, bukan array, sehingga kita menggunakan loop untuk mengakses setiap atribut dengan item().

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

Read next