Der Unterschied zwischen HTML-Attributen und DOM-Properties

Der Unterschied zwischen HTML-Attributen und DOM-Properties

HTML-Attribute und DOM-Properties sind grundlegend unterschiedliche Dinge. Sie können Attribute und Properties mit demselben Namen haben, diese aber auf unterschiedliche Werte setzen.

• Wichtige Unterschiede zwischen Attributen und Properties

  • HTML-Serialisierung: Attribute werden als HTML serialisiert, Properties dagegen nicht
  • Werttyp: Attributwerte sind immer Strings, Properties können jeden Typ haben
  • Groß-/Kleinschreibung: Attributnamen unterscheiden nicht zwischen Groß- und Kleinschreibung, Property-Namen hingegen schon. Attributwerte sind jedoch case-sensitive

• Reflection

  • Der Einfachheit halber definieren die meisten Spezifikationen für alle festgelegten Attribute ein Property-Äquivalent
  • Wenn ein Property ein Attribut reflektiert, ist das Attribut die Datenquelle. Setzt man das Attribut, wird das Property aktualisiert, und liest man aus dem Property, liest man den Wert des Attributs
  • Manche Reflections sind jedoch komplexer. Manchmal unterscheiden sich Attributname und der Name des reflektierenden Properties

• Validierung, Type Coercion und Standardwerte

  • Attribute haben Validierung und Standardwerte, Properties jedoch nicht
  • Einige Properties führen Type Coercion durch

• value bei input-Feldern

  • Es gibt ein value-Attribut und ein value-Property, aber das value-Property reflektiert nicht das value-Attribut. Stattdessen reflektiert das defaultValue-Property das value-Attribut
  • Das value-Property reflektiert überhaupt kein Attribut. Das ist nicht ungewöhnlich; viele Properties wie offsetWidth oder parentNode verhalten sich genauso
  • Das value-Property folgt anfangs dem defaultValue-Property. Wenn value dann per JavaScript oder durch Benutzerinteraktion gesetzt wird, wechselt es auf einen internen Wert

• Attribute sollten der Konfiguration dienen

  • Attribute sollten der Konfiguration dienen, Properties dagegen Zustand enthalten können
  • Der Light-DOM-Baum sollte einen einzelnen Besitzer haben
  • Die Elemente <details> und <dialog> zeigen ihren open-Zustand über das open-Attribut an, und der Browser fügt dieses Attribut als Reaktion auf Benutzerinteraktionen selbst hinzu oder entfernt es. Das wird als Designfehler betrachtet

• Umgang der Frameworks mit den Unterschieden

  • Preact und VueJS setzen ein Prop als Property, wenn propName in element gilt, andernfalls als Attribut. Sie bevorzugen also Properties gegenüber Attributen
  • React macht das Gegenteil. Es setzt Attribute, außer in vordefinierten Fällen, in denen Properties bevorzugt werden.
  • lit-html erhält die Unterscheidung zwischen Attributen und Properties aufrecht; um statt eines Attributs ein Property zu setzen, muss dem Namen ein . vorangestellt werden

Meinung von GN⁺

• Den Unterschied zwischen HTML-Attributen und DOM-Properties zu kennen, ist bei Low-Level-DOM-Arbeit wichtig. In den meisten Fällen macht es keinen großen Unterschied, aber bei der Nutzung von Frameworks ist Vorsicht geboten

• Es scheint sinnvoll, Attribute als Konfiguration und Properties als Zustand zu betrachten. Schade, dass einige neuere HTML-Elemente dieses Prinzip nicht einhalten

• Besonders bei der Verwendung von Custom Elements in React ist Vorsicht nötig. React setzt Props von Custom Elements als Attribute statt als Properties, weshalb reine Property-Fälle möglicherweise nicht funktionieren. Das soll in React 19 verbessert werden

• Es ist auch interessant zu vergleichen, wie große Frameworks wie Preact, Vue, React und lit-html mit Attributen und Properties umgehen. Darin spiegeln sich die Philosophie und Designentscheidungen der jeweiligen Frameworks wider

• Webstandards und Browser-Implementierungen sind nicht immer entwicklerfreundlich. Das value-Attribut und -Property des <input>-Elements sind ein typisches Beispiel. Wegen der Abwärtskompatibilität dürfte sich das nicht leicht ändern lassen, aber künftig wäre ein konsistenteres Design wünschenswert

[superwoou]

https://emewjin.github.io/html-attribute-dom-property/

[superwoou]

attribute und property wurden beide mit demselben Begriff „Eigenschaft“ übersetzt..