getAttribute () ile Element nesnesi özellikleri?

Aynı şeyi beğenir Element.getAttribute("id")ve Element.iddöndürür.

Bir HTMLElement nesnesinin niteliklerine ihtiyacımız olduğunda hangisi kullanılmalıdır?

getAttribute()Ve gibi bu yöntemlerle çapraz tarayıcı sorunu var setAttribute()mı?

Veya doğrudan nesne özelliklerine erişme ile bu öznitelik yöntemlerini kullanma arasında performans üzerinde herhangi bir etki var mı?

getAttributealır niteliği iken bir DOM öğesinin el.idverilerini geri çağırır özelliğini bu DOM öğesinin. Aynı değiller.

DOM özellikleri çoğu zaman özniteliklerle senkronize edilir.

Ancak senkronizasyon aynı değeri garanti etmez . Klasik bir örnek, bir çapa elemanı arasında el.hrefve el.getAttribute('href')içindir.

Örneğin:

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

Bu davranış, W3C'ye göre href özelliğinin iyi biçimlendirilmiş bir bağlantı olması gerektiğinden oluşur. Çoğu tarayıcı bu standarda uymaktadır (tahmin edin kim uymaz?).

input'In checkedmülkü için başka bir dava var . DOM özelliği trueveya falseözelliği dizeyi "checked"veya boş bir dizeyi döndürürken döndürür .

Ve sonra, yalnızca tek yönlü senkronize edilen bazı özellikler var . En iyi örnek, valuebir inputelemanın özelliğidir . Değerinin DOM özelliği aracılığıyla değiştirilmesi, niteliği değiştirmez (düzenleme: daha fazla kesinlik için ilk yorumu kontrol edin).

Bu nedenlerden dolayı, tarayıcılar arasında davranışları farklılık gösterdiğinden, özellikleri değil, DOM özelliklerini kullanmaya devam etmenizi öneririm .

Gerçekte, özellikleri kullanmanız gereken yalnızca iki durum vardır:

1. Özel bir HTML özelliği, çünkü bir DOM mülküyle senkronize edilmedi.
2. Mülkten senkronize edilmeyen yerleşik bir HTML özniteliğine erişmek için, özniteliğe (örneğin, valuebir inputöğenin orijinali ) ihtiyacınız olduğundan eminiz .

Daha detaylı bir açıklama istiyorsanız bu sayfayı okumanızı şiddetle tavsiye ederim . Sadece birkaç dakikanızı alacak, ancak bilgilerden (burada özetlediğim) memnun kalacaksınız.

getAttribute('attribute') normalde öznitelik değerini tam olarak sayfanın HTML kaynağında tanımlandığı gibi bir dize olarak döndürür.

Ancak, element.attributeözniteliğin normalleştirilmiş veya hesaplanmış bir değerini döndürebilir. Örnekler:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href tam URL'yi içerecektir
• <input type="checkbox" checked>
  • input.checked doğru olacaktır (boole)
• <input type="checkbox" checked="bleh">
  • input.checked doğru olacaktır (boole)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img.width , resim yüklenmeden önce 0 (sayı) olacaktır
  • img.width, görüntü (veya ilk birkaç baytı) yüklendiğinde 64 (sayı) olacaktır
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img. genişlik hesaplanan % 50 olacaktır
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img. genişliği 50 (sayı) olacaktır
• <div style='background: lime;'></div>
  • div.style bir nesne olacak

Buna göre jsPerf testi getAttribute ,id özellikten .

PS

İşin garibi, her iki ifade de IE8'de çok kötü performans gösteriyor (diğer tarayıcılarla karşılaştırıldığında).

Özel bir nedeniniz olmadıkça her zaman özellikleri kullanın.

• getAttribute() ve setAttribute() eski IE'de bozulmuştur (ve sonraki sürümlerde uyumluluk modu)
• özellikler daha kullanışlıdır (özellikle boole özniteliklerine karşılık gelenler)

Orada bazı istisnalar :

• özniteliklerine erişmek <form>elemanların
• özel özniteliklere erişim (özel öznitelikleri kullanmaktan hiç vazgeçmeme rağmen)

SO'da bu konu hakkında birkaç kez yazdım:

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

.idfonksiyon çağrısı ek yükünü kaydeder. (ki bu çok küçük ama siz istediniz.)

Bunu tamamen anlamak için aşağıdaki örneği deneyin. Aşağıdaki DIV için

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

Dönecektir Element.getAttribute('class'), myclassancak Element.classNameonu DOM özelliğinden hangisinin alacağını kullanmanız gerekir.

Bunun büyük bir fark yarattığı alanlardan biri, özniteliklere dayalı css stilidir.

Aşağıdakileri göz önünde bulundur:

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>

Özel özellik ayarlı div, doğrudan özelliğin değerini yansıtmaz ve özellik seçicimiz tarafından seçilmez (div[custom] ) .

setAttributeBununla birlikte, kullanılarak özel öznitelik kümesine sahip div, bir css öznitelik seçici kullanılarak seçilebilir ve buna göre stil belirlenebilir.