Lors de l'écriture de code source HTML, vous pouvez définir des attributs sur vos éléments HTML. Ensuite, une fois que le navigateur a analysé votre code, un nœud DOM correspondant sera créé. Ce nœud est un objet et a donc des propriétés .
Par exemple, cet élément HTML:
<input type="text" value="Name:">
a 2 attributs ( typeet value).
Une fois que le navigateur a analysé ce code, un objet HTMLInputElement sera créé et cet objet contiendra des dizaines de propriétés telles que: accept, accessKey, align, alt, attributs, autofocus, baseURI, vérifié, childElementCount, childNodes, children, classList, className, clientHeight, etc.
Pour un objet de noeud DOM donné, les propriétés sont les propriétés de cet objet et les attributs sont les éléments de la attributespropriété de cet objet.
Lorsqu'un nœud DOM est créé pour un élément HTML donné, bon nombre de ses propriétés se rapportent à des attributs portant des noms identiques ou 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, typeet les valuepropriétés (entre autres):
La idpropriété est une propriété reflétée pour l' idattribut: obtenir la propriété lit la valeur d'attribut et définir la propriété écrit la valeur d'attribut. idest une propriété reflétée pure , elle ne modifie ni ne limite la valeur.
La typepropriété est une propriété reflétée pour l' typeattribut: obtenir la propriété lit la valeur d'attribut et définir la propriété écrit la valeur d'attribut. typen'est pas une propriété reflétée pure car elle est limitée aux valeurs connues (par exemple, les types valides d'une entrée). Si vous l'aviez <input type="foo">, alors theInput.getAttribute("type")vous donne "foo"mais theInput.typevous donne "text".
En revanche, la valuepropriété ne reflète pas l' valueattribut. Il s'agit plutôt de la valeur actuelle de l'entrée. Lorsque l'utilisateur modifie manuellement la valeur de la zone de saisie, la valuepropriété reflétera cette modification. Donc, si l'utilisateur entre "John"dans la zone de saisie, alors:
theInput.value // returns "John"
tandis que:
theInput.getAttribute('value') // returns "Name:"
La valuepropriété reflète le contenu textuel actuel à l'intérieur de la zone de saisie, tandis que l' valueattribut contient le contenu textuel initial de l' valueattribut du code source HTML.
Donc, si vous voulez savoir ce qui se trouve actuellement dans la zone de texte, lisez la propriété. Si vous voulez cependant savoir quelle était la valeur initiale de la zone de texte, lisez l'attribut. Ou vous pouvez utiliser la defaultValuepropriété, qui est un pur reflet de l' valueattribut:
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
Il y a plusieurs propriétés qui reflètent directement leur attribut ( rel, id), certains sont des réflexions directes avec des noms légèrement différents ( htmlForreflète l' forattribut, classNamereflète l' classattribut), beaucoup qui reflètent leur attribut , mais avec restrictions / modifications ( src, href, disabled, multiple), etc. sur. La spécification couvre les différents types de réflexion.
