Quelle est la différence entre les propriétés et les attributs en HTML?

lorsque vous écrivez du code source HTML, vous pouvez définir attributs sur vos éléments HTML. Ensuite, une fois que le navigateur aura épluché votre code, un noeud DOM correspondant sera créé. Ce noeud est un objet, et donc il a propriétés .

par exemple, cet élément HTML:

<input type="text" value="Name:">

possède 2 attributs ( type et value ).

une fois le navigateur parse ce code, un objet HTMLInputElement sera créé, et cet objet contiendra des douzaines de propriétés comme: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.

pour un objet DOM node donné, les propriétés sont les propriétés de cet objet, et les attributs sont les éléments de la propriété attributes de cet objet.

Lorsqu'un noeud DOM est créé pour un élément HTML donné, beaucoup de ses propriétés se rapportent à des attributs avec les mêmes noms ou des noms similaires, mais ce n'est pas une relation un-à-un. Par exemple, pour cet élément HTML:

<input id="the-input" type="text" value="Name:">

le noeud DOM correspondant aura id , type , et value propriétés (entre autres):

• le "bien 151980920" est un "bien reflété 1519420920" pour l'attribut id : obtenir la propriété lit la valeur de l'attribut, et définir la propriété écrit la valeur de l'attribut. id est une pure propriété réfléchie, il ne modifie ni limite la valeur.

• la propriété type est une propriété réfléchie pour l'attribut type : obtenir la propriété lit la valeur de l'attribut, et la définition de la propriété écrit la valeur de l'attribut. type n'est pas une propriété réfléchie pure parce qu'elle est limitée à valeurs connues (par exemple, les types valides d'une entrée). Si vous avez <input type="foo"> , alors theInput.getAttribute("type") vous donne "foo" mais theInput.type vous donne "text" .

• en revanche, la propriété value ne reflète pas l'attribut value . Au lieu de cela, c'est la valeur actuelle de entrée. Lorsque l'utilisateur modifie manuellement la valeur de la boîte de saisie, la propriété value reflétera ce changement. Ainsi, si l'utilisateur entre "John" dans la boîte de saisie, alors:

  theInput.value // returns "John"
  

  attendu que:

  theInput.getAttribute('value') // returns "Name:"
  

  la propriété value reflète le texte courant contenu à l'intérieur de la case d'entrée, tandis que l'attribut value contient le texte initial contenu de la case d'entrée. value attribut du code source HTML.

  donc si vous voulez savoir ce qui est actuellement dans la zone de texte, lisez la propriété. Toutefois, si vous voulez connaître la valeur initiale de la zone de texte, lisez l'attribut. Ou vous pouvez utiliser la propriété defaultValue , qui est un pur reflet de l'attribut value :

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"
  

il existe plusieurs propriétés qui reflètent directement leur attribut ( rel , id ), certaines sont des réflexions directes avec des noms légèrement différents ( htmlFor reflète l'attribut for , className reflète l'attribut class ), beaucoup qui reflètent leur attribut mais avec des restrictions/modifications ( src , href , disabled , multiple ), et ainsi de suite. le spec couvre les différents types de réflexion.