getAttribute () versus properti objek Elemen?

Ekspresi menyukai Element.getAttribute("id")dan Element.idmengembalikan hal yang sama.

Manakah yang harus digunakan saat kita membutuhkan atribut objek HTMLElement?

Apakah ada masalah lintas browser dengan metode seperti getAttribute()dan setAttribute()?

Atau dampak apa pun pada kinerja antara mengakses langsung properti objek vs menggunakan metode atribut ini?

getAttributemengambil atribut dari elemen DOM, sementara el.idmengambil properti dari elemen DOM ini. Mereka tidaklah sama.

Seringkali, properti DOM disinkronkan dengan atribut.

Namun, sinkronisasi tidak menjamin nilai yang sama . Contoh klasik adalah antara el.hrefdan el.getAttribute('href')untuk elemen jangkar.

Sebagai contoh:

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

Perilaku ini terjadi karena menurut W3C , properti href harus berupa tautan yang dibentuk dengan baik. Kebanyakan browser menghormati standar ini (coba tebak siapa yang tidak?).

Ada kasus lain untuk input's checkedproperti. Properti DOM mengembalikan trueatau falsesaat atribut mengembalikan string "checked"atau string kosong.

Lalu, ada beberapa properti yang hanya disinkronkan satu arah . Contoh terbaik adalah valueproperti sebuah inputelemen. Mengubah nilainya melalui properti DOM tidak akan mengubah atribut (edit: periksa komentar pertama untuk lebih presisi).

Karena alasan ini, saya sarankan Anda tetap menggunakan properti DOM , dan bukan atributnya, karena perilakunya berbeda di antara browser.

Pada kenyataannya, hanya ada dua kasus di mana Anda perlu menggunakan atribut:

1. Atribut HTML khusus, karena tidak disinkronkan ke properti DOM.
2. Untuk mengakses built-in HTML atribut, yang tidak disinkronkan dari properti, dan Anda yakin Anda membutuhkan atribut (misalnya, asli valuedari sebuah inputelemen).

Jika Anda menginginkan penjelasan yang lebih detail, saya sangat menyarankan Anda membaca halaman ini . Ini hanya akan memakan waktu beberapa menit, tetapi Anda akan senang dengan informasi (yang saya simpulkan di sini).

getAttribute('attribute') biasanya mengembalikan nilai atribut sebagai string, persis seperti yang ditentukan dalam sumber HTML halaman.

Namun, element.attributedapat mengembalikan nilai atribut yang dinormalisasi atau dihitung. Contoh:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href akan berisi URL lengkap
• <input type="checkbox" checked>
  • input.checked akan menjadi true (boolean)
• <input type="checkbox" checked="bleh">
  • input.checked akan menjadi true (boolean)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img.width akan menjadi 0 (angka) sebelum gambar dimuat
  • img.width akan menjadi 64 (angka) saat gambar (atau beberapa byte pertama) dimuat
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img.width akan dihitung 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.width akan menjadi 50 (angka)
• <div style='background: lime;'></div>
  • div.style akan menjadi objek

Menurut pengujian jsPerf getAttribute ini lebih lambat daripada idproperti.

PS

Anehnya, kedua pernyataan tersebut berkinerja sangat buruk di IE8 (dibandingkan dengan peramban lain).

Selalu gunakan properti kecuali Anda memiliki alasan khusus untuk tidak melakukannya.

• getAttribute()dan setAttribute()rusak di IE lama (dan mode kompatibilitas di versi yang lebih baru)
• properti lebih nyaman (khususnya, yang sesuai dengan atribut boolean)

Ada beberapa pengecualian :

• mengakses atribut <form> elemen
• mengakses atribut khusus (meskipun saya sama sekali tidak menyarankan menggunakan atribut khusus)

Saya telah menulis tentang subjek ini beberapa kali di SO:

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

.idmenghemat overhead panggilan fungsi. (yang sangat kecil, tetapi Anda bertanya.)

Coba contoh di bawah ini untuk memahami ini sepenuhnya. Untuk DIV di bawah ini

<div class="myclass"></div>

The Element.getAttribute('class')akan kembali myclasstetapi Anda harus menggunakan Element.classNameyang mengambil dari properti DOM.

Satu area di mana hal ini membuat perbedaan besar adalah dengan gaya css berdasarkan atribut.

Pertimbangkan hal berikut:

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

Div dengan set properti khusus secara langsung tidak mencerminkan nilai ke atribut, dan tidak dipilih oleh pemilih atribut kami (div[custom] ) di css.

Namun, div dengan atribut khusus yang ditetapkan setAttributedapat dipilih menggunakan pemilih atribut css, dan diberi gaya yang sesuai.