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

Question

Après les modifications apportées dans jQuery 1.6.1, j'ai essayé de définir la différence entre les propriétés et les attributs en HTML.

En regardant la liste dans les notes de publication de jQuery 1.6.1 (près du bas), il semble que l'on puisse classer les propriétés et attributs HTML comme suit:

Propriétés: Tous ceux qui ont une valeur booléenne ou qui sont calculés en UA, tels que selectedIndex.
Attributs: "Attributs" pouvant être ajoutés à un élément HTML qui n'est ni booléen ni contenant une valeur générée par un agent utilisateur.

Pensées?

Šime Vidas · Accepted Answer

Lorsque vous écrivez du code source HTML, vous pouvez définir attributs sur vos éléments HTML. Ensuite, une fois que votre navigateur aura analysé votre code, un nœud DOM correspondant sera créé. Ce nœud est un objet et a donc propriétés _.

Par exemple, cet élément HTML:

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

a 2 attributs (type et 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, enfants, 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 propriété attributes 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 le même nom ou des noms similaires, mais il ne s'agit pas d'une relation un à un. Par exemple, pour cet élément HTML:

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

le nœud DOM correspondant aura les propriétés id, type et value (entre autres):

La propriété id est une propriété reflétée pour l'attribut id: L'obtention de la propriété lit la valeur de l'attribut et sa définition permet d'écrire la valeur de l'attribut. id est une propriété {pure} reflétée, elle ne modifie ni ne limite la valeur.
La propriété type est une propriété reflétée pour l'attribut type: L'obtention de la propriété lit la valeur de l'attribut et sa définition permet d'écrire la valeur de l'attribut. type n'est pas une propriété reflétée pure car elle est limitée à valeurs connues} _ (par exemple, les types valides d'une entrée). Si vous aviez <input type="foo">, alors theInput.getAttribute("type") vous donnera "foo" mais theInput.type vous donnera "text".
En revanche, la propriété value ne reflète pas l'attribut value. Au lieu de cela, c'est le valeur actuelle de l'entrée. Lorsque l'utilisateur modifie manuellement la valeur de la zone de saisie, la propriété value reflète 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 propriété value reflète le contenu textuel current dans la zone de saisie, tandis que l'attribut value contient le contenu textuel initial de l'attribut value 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 souhaitez toutefois connaître la valeur initiale de la zone de texte, lisez l’attribut. Ou vous pouvez utiliser la propriété defaultValue, qui est un reflet pur de l'attribut value:
```
theInput.value // returns "John" theInput.getAttribute('value') // returns "Name:" theInput.defaultValue // returns "Name:" 
```

Plusieurs propriétés 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), d'autres reflètent leur attribut mais avec des restrictions/modifications (src , href, disabled, multiple), etc. La spécification couvre les différents types de réflexion.

sibidiba · Answer

Les réponses expliquent déjà comment les attributs et les propriétés sont gérés différemment, mais je voudrais vraiment souligner à quel point est fou cela est vrai. Même si c'est dans une certaine mesure la spécification.

Il est fou d’avoir certains attributs (par exemple, id, class, foo, bar) pour ne conserver qu’un type de valeur dans le DOM, alors que certains attributs (par exemple, coché, sélectionné) deux valeurs; c'est-à-dire, la valeur "quand il a été chargé" et la valeur de "l'état dynamique". (Le DOM n'est-il pas censé représenter l'état de document dans toute son étendue?)

Il est absolument essentiel que deux champs de saisie , par exemple. un text et une checkbox se comportent de la même manière . Si le champ de saisie de texte ne conserve pas une valeur distincte "lors de son chargement" et la valeur "en cours, dynamique", pourquoi la case à cocher apparaît-elle? Si la case à cocher a deux valeurs pour l'attribut vérifié, pourquoi n'en a-t-il pas deux pour ses attributs class et id? Si vous prévoyez de modifier la valeur d'un text * input * field, et vous attendez que le DOM (c'est-à-dire la "représentation sérialisée") change et reflète ce changement, pourquoi n'attendriez-vous pas la même chose d'un champ input de type case à cocher sur l'attribut vérifié?

La différenciation de "c’est un attribut booléen" n’a aucun sens pour moi, ou du moins n’en est pas une raison suffisante.

Daniel Ruf · Answer

bien ceux-ci sont spécifiés par le W3C en quoi consistent un attribut et une propriété http://www.w3.org/TR/SVGTiny12/attributeTable.html

mais actuellement attr et prop ne sont pas si différents et il y a presque les mêmes

mais ils préfèrent l'accessoire pour certaines choses

Résumé de l'utilisation préférée

La méthode .prop () doit être utilisée pour les attributs/propriétés booléens et pour les propriétés qui n'existent pas en HTML (telles que window.location). Tous les autres attributs (ceux que vous pouvez voir dans le code HTML) peuvent et doivent continuer à être manipulés avec la méthode .attr ().

en fait, vous n’avez pas à changer quelque chose si vous utilisez attr ou prop, ou les deux, les deux fonctionnent

subtleseeker · Answer

Après avoir lu la réponse de Sime Vidas , j’ai cherché davantage et trouvé une explication très simple et facile à comprendre dans/ la documentation angulaire .

Attribut HTML vs propriété DOM

Les attributs sont définis par HTML. Les propriétés sont définies par le DOM (Modèle d'objet de document).

Quelques attributs HTML ont un mappage 1: 1 sur des propriétés. id est un Exemple.

Certains attributs HTML n'ont pas de propriétés correspondantes. colspan est un exemple.

Certaines propriétés du DOM n'ont pas d'attribut correspondant. textContent est un exemple.

De nombreux attributs HTML semblent mapper sur des propriétés ... mais pas dans le comme vous pourriez penser!

Cette dernière catégorie est source de confusion jusqu’à ce que vous compreniez cette règle générale:

Attributes initialize _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _\Propriété les valeurs peuvent changer; les valeurs d'attribut ne peuvent pas.

Par exemple, lorsque le navigateur affiche <input type="text" value="Bob">, il crée un nœud DOM correspondant avec une propriété value initialisée À bob".

Lorsque l'utilisateur entre "Sally" dans la zone de saisie, l'élément DOM value propriété devient "Sally". Mais le HTML value attribut reste inchangé lorsque vous découvrez si vous interrogez l’élément d’entrée à ce sujet attribut: input.getAttribute('value') renvoie "Bob".

L'attribut HTML value spécifie la valeur initiale; le DOM value propriété est la actuelle valeur.

L'attribut disabled est un autre exemple particulier. Un bouton La propriété disabled est false par défaut, donc le bouton est activé. Quand vous ajoutez l'attribut disabled, sa présence seule initialise le la propriété disabled du bouton à true, de sorte que le bouton est désactivé.

L'ajout et la suppression de l'attribut disabled désactive et active le fichier bouton. La valeur de l'attribut n'est pas pertinente, c'est pourquoi vous ne peut pas activer un bouton en écrivant <button disabled="false">Still Disabled</button>.

La définition de la disabled propriété du bouton désactive ou active le bouton. La valeur de la propriété compte.

L'attribut HTML et la propriété DOM ne sont pas la même chose, même quand ils ont le même nom.

Willem van der Veen · Answer

Différence de propriétés et d'attributs HTML:

Regardons d'abord les définitions de ces mots avant d'évaluer quelle est la différence en HTML:

Définition en anglais:

Les attributs font référence à des informations supplémentaires sur un objet.
Les propriétés décrivent les caractéristiques d'un objet.

En contexte HTML:

Lorsque le navigateur analyse le code HTML, il crée une arborescence de données qui est essentiellement une représentation en mémoire du code HTML. Si la structure de données de l’arbre contient des nœuds qui sont des éléments HTML et du texte. Les attributs et propriétés se rapportent à ceci de la manière suivante:

Attributes sont des informations supplémentaires que nous pouvons mettre dans le code HTML pour initialize certaines propriétés DOM.
Propriétés sont formés lorsque le navigateur analyse le code HTML et génère le DOM. Chacun des éléments du DOM a son propre ensemble de propriétés qui sont toutes définies par le navigateur. Certaines de ces propriétés peuvent avoir leur valeur initiale définie par des attributs HTML. Chaque fois qu'une propriété DOM ayant une influence sur la page rendue change, la page sera immédiatement restituée

Il est également important de réaliser que le mappage de ces propriétés n'est pas compris entre 1 et 1. En d'autres termes, tous les attributs que nous donnons sur un élément HTML n'auront pas une propriété DOM nommée similaire.

En outre, ont différents éléments DOM propriétés différentes. Par exemple, un élément <input> a une propriété value qui n'est pas présente dans une propriété <div>.

Exemple:

Prenons le document HTML suivant:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- charset is a attribute --> <meta name="viewport" content="width=device-width"> <!-- name and content are attributes --> <title>JS Bin</title> </head> <body> <div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes --> </body> </html>

Ensuite, nous inspectons le <div>, dans la console JS:

 console.dir(document.getElementById('foo'));

Nous voyons les propriétés DOM suivantes (chrome devtools, toutes les propriétés ne sont pas affichées):

Nous pouvons voir que l'attribut id dans le code HTML est maintenant également une propriété id dans le DOM. L'identifiant a été initialisé par le HTML (bien que nous puissions le changer avec javascript).
Nous pouvons voir que l'attribut de classe dans le code HTML n'a pas de propriété de classe correspondante (class est le mot clé réservé dans JS). Mais en réalité, 2 propriétés, classList et className.