Cara Mengambil Nilai (Value) Attribute Element Menggunakan Javascript

Nilai Attribute di dalam element Dom Html memilliki banyak nama mulai dari id, class, style, name, dan nama - nama lainnya. Umumnya untuk mengambil nilai id dan class kita menggunakan fungsi javascript sebagai berikut :

• 'id' menggunakan document.getElementById().
• 'class' menggunakan document.getElementsByClassName();

Nah, bagaimana untuk mengambil nilai attribute dengan nama style, name, dan nama - nama lainnya?
Berikut ini akan saya jelaskan.

Untuk menggambil nilai attribute ini, kita harus mengetahui posisi element yang akan kita ambil nilai attribute nya. Untuk mengetahui posisi element ini, kita memiliki 2 cara yaitu :

1. Mengambil nilai attribute dengan document.getElementById()
2. Mengambil nilai attribute dengan document.getElementsByClassName(), dan

1. Mengambil nilai attribute dengan document.getElementById()

Teknik mengambil nilai attribute menggunakan document.getElementById() adalah teknik yang paling mudah digunakan karena id element di dalam DOM HTML hanya terdapat satu dan tidak boleh sama. Jika terdapat lebih dari satu id dengan nilai yang sama, maka javascript akan mengambil nilai id di urutan baris teratas pada DOM HTML.

Kembali ke topik bahwa untuk mengambil nilai attribute menggunakan document.getElementById(), kita bisa menggunakan fungsi sebagi berikut:

document.getElementById('Nama Id').attributes.NamaAttribute.value;

ket:
Nama Id adalah nama atrribute id di dalam element DOM HTML.
Nama Attribute adalah nama attribute di dalam element DOM HTML yang ingin di ambil nilainya.

Sebagai contoh. Disini saya memiliki Element Div yang di dalamnya terdapat id dan attribute lain bernama dbLink sebagai berikut :

<div id='tesId' dbLink='ini adalah nilai attribute'></div>

Lalu saya ingin mengambil nilai attribute dbLink. Maka penulisan javascriptnya adalah sebagai berikut :

document.getElementById('tesId').attributes.dbLink.value;

Jika kita tampilkan dalam console.log(), maka akan didapatkan nilai attribute dari dbLink yaitu 'ini adalah nilai attribute'.

Lihat DEMO

2. Mengambil nilai attribute dengan document.getElementsByClassName()

Nilai attribute juga dapat kita ambil menggunakan fungsi document.getElementsByClassName(). Berbeda dengan teknik pertama, Untuk menggunakan teknik ini, kita harus tau posisi class yang terdapat pada element DOM HTML.

Untuk mengambil nilai attribute menggunakan document.getElementsByClassName(), kita bisa menggunakan fungsi berikut :

document.getElementsByClassName('Nama Class')[Number].attributes.NamaAttribute.value;

ket:
Nama Class adalah nama atrribute class di dalam element DOM HTML.
Number adalah posisi class di dalam element DOM HTML misalnya 0, 1, 2, 3, dst.
Nama Attribute adalah nama attribute di dalam element DOM HTML yang ingin di ambil nilainya.


Sebagai Contoh, Disini saya memiliki 8 element div berisi class dengan nama yang sama dan di dalam tiap-tiap element div terdapat attribute dbLink yang akan kita ambil nilainya.

<div class='tesclass' dbLink='nilai 1'></div>
<div class='tesclass' dbLink='nilai 2'></div>
<div class='tesclass' dbLink='nilai 3'></div>
<div class='tesclass' dbLink='nilai 4'></div>
<div class='tesclass' dbLink='nilai 5'></div>
<div class='tesclass' dbLink='nilai 6'></div>
<div class='tesclass' dbLink='nilai 7'></div>
<div class='tesclass' dbLink='nilai 8'></div>

Lalu saya akan mengambil nilai dbLink yang berada pada posisi baris ke 4. Maka fungsinya saya tulis sebagai berikut:

document.getElementsByClassName('tesclass')[3].attributes.dbLink.value;

Kenapa saya tulis numbernya 3? karena urutan menghitung baris element dimulai dari 0 bukan 1. Sampai disini paham ya.

Lihat DEMO