getAttribute () versus Element-Objekteigenschaften?

Ausdrücke mögen Element.getAttribute("id")und Element.idgeben dasselbe zurück.

Welches sollte verwendet werden, wenn wir Attribute eines HTMLElement-Objekts benötigen?

Gibt es ein browserübergreifendes Problem mit diesen Methoden wie getAttribute()und setAttribute()?

Oder Auswirkungen auf die Leistung zwischen dem direkten Zugriff auf Objekteigenschaften und der Verwendung dieser Attributmethoden?

getAttributeRuft das Attribut eines DOM-Elements ab, während el.iddie Eigenschaft dieses DOM-Elements abgerufen wird . Sie sind nicht gleich.

Meistens werden DOM-Eigenschaften mit Attributen synchronisiert.

Die Synchronisation garantiert jedoch nicht den gleichen Wert . Ein klassisches Beispiel ist zwischen el.hrefund el.getAttribute('href')für ein Ankerelement.

Beispielsweise:

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

Dieses Verhalten tritt auf, weil laut W3C die Eigenschaft href eine wohlgeformte Verbindung sein muss. Die meisten Browser respektieren diesen Standard (raten Sie mal, wer nicht?).

Es ist ein weiterer Fall für die inputs‘ checkedEigenschaft. Die DOM-Eigenschaft gibt zurück trueoder falsewährend das Attribut die Zeichenfolge "checked"oder eine leere Zeichenfolge zurückgibt .

Und dann gibt es einige Eigenschaften, die nur in eine Richtung synchronisiert werden . Das beste Beispiel ist die valueEigenschaft eines inputElements. Durch Ändern des Werts über die DOM-Eigenschaft wird das Attribut nicht geändert (Bearbeiten: Überprüfen Sie den ersten Kommentar auf mehr Genauigkeit).

Aus diesen Gründen würde ich vorschlagen, dass Sie weiterhin die DOM- Eigenschaften und nicht die Attribute verwenden, da sich deren Verhalten zwischen den Browsern unterscheidet.

In der Realität gibt es nur zwei Fälle, in denen Sie die Attribute verwenden müssen:

1. Ein benutzerdefiniertes HTML-Attribut, da es nicht mit einer DOM-Eigenschaft synchronisiert ist.
2. Um auf ein integriertes HTML-Attribut zuzugreifen, das nicht über die Eigenschaft synchronisiert wird, benötigen Sie das Attribut (z. B. das Original valueeines inputElements).

Wenn Sie eine ausführlichere Erklärung wünschen, empfehle ich Ihnen dringend, diese Seite zu lesen . Es dauert nur ein paar Minuten, aber Sie werden von den Informationen (die ich hier zusammengefasst habe) begeistert sein.

getAttribute('attribute') Normalerweise wird der Attributwert als Zeichenfolge zurückgegeben, genau wie in der HTML-Quelle der Seite definiert.

Könnte element.attributejedoch einen normalisierten oder berechneten Wert des Attributs zurückgeben. Beispiele:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href enthält die vollständige URL
• <input type="checkbox" checked>
  • input.checked ist true (boolean)
• <input type="checkbox" checked="bleh">
  • input.checked ist true (boolean)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • Img.width ist 0 (Nummer), bevor das Bild geladen wird
  • Die Bildbreite beträgt 64 (Nummer), wenn das Bild (oder die ersten paar Bytes davon) geladen wird
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • Die Breite beträgt die berechneten 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • Die Breite beträgt 50 (Anzahl)
• <div style='background: lime;'></div>
  • div.style wird ein Objekt sein

.idspart den Funktionsaufruf-Overhead. (Das ist sehr klein, aber du hast gefragt.)

Demnach ist der jsPerf-Test getAttribute langsamer als die idEigenschaft.

PS

Seltsamerweise sind beide Anweisungen im IE8 sehr schlecht (im Vergleich zu anderen Browsern).

Verwenden Sie die Eigenschaften immer, es sei denn, Sie haben einen bestimmten Grund, dies nicht zu tun.

• getAttribute()und setAttribute()sind im älteren IE defekt (und Kompatibilitätsmodus in späteren Versionen)
• Eigenschaften sind bequemer (insbesondere solche, die booleschen Attributen entsprechen)

Es gibt einige Ausnahmen :

• Zugriff auf Attribute von <form>Elementen
• Zugriff auf benutzerdefinierte Attribute (obwohl ich davon abraten würde, überhaupt benutzerdefinierte Attribute zu verwenden)

Ich habe einige Male über dieses Thema auf SO geschrieben:

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

Versuchen Sie das folgende Beispiel, um dies vollständig zu verstehen. Für die unten stehende DIV

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

Das Element.getAttribute('class')wird zurückgegeben, myclassaber Sie müssen es verwenden Element.className, um es von der DOM-Eigenschaft abzurufen.

Ein Bereich, in dem dies einen großen Unterschied macht, ist das CSS-Styling basierend auf Attributen.

Folgendes berücksichtigen:

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>

Das div mit dem benutzerdefinierten Eigenschaftssatz spiegelt direkt nicht den Wert des Attributs wider und wird nicht von unserem Attributselektor ( div[custom]) im CSS ausgewählt.

Das div mit dem benutzerdefinierten Attributsatz, das mit verwendet wird setAttribute, kann jedoch mit einem CSS-Attributselektor ausgewählt und entsprechend gestaltet werden.