Différences entre les attributs HTML et les propriétés DOM

Différences entre les attributs HTML et les propriétés DOM

Les attributs HTML et les propriétés DOM sont fondamentalement différents. Ils peuvent avoir un attribut et une propriété du même nom, mais ceux-ci peuvent être définis avec des valeurs différentes.

• Différences principales entre attributs et propriétés

  • Sérialisation HTML : les attributs sont sérialisés en HTML, mais pas les propriétés
  • Type de valeur : la valeur d’un attribut est toujours une chaîne de caractères, alors qu’une propriété peut être de n’importe quel type
  • Sensibilité à la casse : les noms d’attributs ne sont pas sensibles à la casse, mais les noms de propriétés le sont. En revanche, les valeurs d’attributs sont sensibles à la casse

• Réflexion (Reflection)

  • Par commodité, la plupart des spécifications créent un équivalent en propriété pour chaque attribut défini
  • Lorsqu’une propriété reflète un attribut, l’attribut est la source des données. Définir l’attribut met à jour la propriété, et lire depuis la propriété revient à lire l’attribut
  • Mais certains mécanismes de réflexion sont plus complexes. Il arrive parfois que le nom de la propriété soit différent de celui de l’attribut qu’elle reflète

• Validation, coercition de type et valeurs par défaut

  • Les attributs ont une validation et des valeurs par défaut, mais pas les propriétés
  • Certaines propriétés effectuent une coercition de type

• value des champs input

  • Il existe un attribut value et une propriété value, mais la propriété value ne reflète pas l’attribut value. À la place, c’est la propriété defaultValue qui reflète l’attribut value
  • La propriété value ne reflète aucun attribut. Ce n’est pas un cas rare, et de nombreuses propriétés comme offsetWidth ou parentNode fonctionnent ainsi
  • La propriété value suit initialement la propriété defaultValue. Ensuite, si la propriété value est définie via JavaScript ou par interaction utilisateur, elle bascule vers une valeur interne

• Les attributs devraient servir à la configuration

  • Les attributs devraient servir à la configuration, tandis que les propriétés peuvent contenir l’état
  • L’arbre light-DOM devrait avoir un propriétaire unique
  • Les éléments <details> et <dialog> expriment leur état open via l’attribut open, et le navigateur ajoute/supprime lui-même cet attribut en réponse aux interactions utilisateur. Cela est considéré comme une erreur de conception

• Gestion des différences par les frameworks

  • Preact et VueJS définissent une prop comme propriété si propName in element, sinon ils définissent un attribut. Ils privilégient les propriétés aux attributs
  • React fait l’inverse. Il définit des attributs, sauf dans des cas prédéfinis où il préfère les propriétés.
  • lit-html maintient la distinction entre attributs et propriétés, et pour définir une propriété plutôt qu’un attribut, il faut préfixer le nom avec un .

L’avis de GN⁺

• Comprendre la différence entre attributs HTML et propriétés DOM est important lorsqu’on travaille avec le DOM à bas niveau. Dans la plupart des cas, la différence n’est pas majeure, mais il faut être vigilant avec les frameworks

• Il semble souhaitable de distinguer les attributs comme relevant de la configuration (configuration) et les propriétés comme représentant l’état (state). Il est regrettable que certains éléments HTML récents ne respectent pas cela

• Il faut être particulièrement prudent lorsqu’on utilise des éléments personnalisés avec React. React définit les propriétés des éléments personnalisés comme des attributs plutôt que comme des propriétés, ce qui peut empêcher le fonctionnement de ceux qui ne supportent que les propriétés. Cela devrait être amélioré dans React 19

• Il est également intéressant de comparer la manière dont les principaux frameworks comme Preact, Vue, React et lit-html gèrent attributs et propriétés. Cela reflète la philosophie et les choix de conception de chaque framework

• Les standards du Web et l’implémentation des navigateurs ne sont pas toujours favorables aux développeurs. Le cas de l’attribut et de la propriété value sur l’élément <input> en est un bon exemple. Il sera probablement difficile de changer cela à cause de la rétrocompatibilité, mais on peut espérer une conception plus cohérente à l’avenir

[superwoou]

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

[superwoou]

Ils ont traduit attribute et property par le même terme « attribut »..