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

Après les modifications apscopes dans jQuery 1.6.1, j’ai essayé de définir la différence entre les propriétés et les atsortingbuts en HTML.

En regardant la liste des notes de publication de jQuery 1.6.1 (en bas), il semble que l’on puisse classer les propriétés et atsortingbuts HTML comme suit:

  • Propriétés: Tout ce qui a une valeur booléenne ou UA, tel que selectedIndex.

  • Atsortingbuts: ‘Atsortingbuts’ pouvant être ajoutés à un élément HTML qui n’est ni booléen ni contenant une valeur UA générée.

Pensées?

Lors de l’écriture du code source HTML, vous pouvez définir des atsortingbuts sur vos éléments HTML. Ensuite, une fois que le navigateur parsing votre code, un nœud DOM correspondant sera créé. Ce noeud est un object et a donc des propriétés .

Par exemple, cet élément HTML:

 

a 2 atsortingbuts ( type et value ).

Une fois que le navigateur parsing ce code, un object HTMLInputElement sera créé et cet object contiendra des dizaines de propriétés comme: accept, accessKey, align, alt, atsortingbutes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.

Pour un object de noeud DOM donné, les propriétés sont les propriétés de cet object et les atsortingbuts sont les éléments de la propriété atsortingbutes de cet object.

Lorsqu’un nœud DOM est créé pour un élément HTML donné, la plupart de ses propriétés se rapportent à des atsortingbuts portant des noms identiques ou similaires, mais ce n’est pas une relation un à un. Par exemple, pour cet élément HTML:

  

le noeud 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’atsortingbut id : l’obtention de la propriété lit la valeur de l’atsortingbut et la définition de la propriété écrit la valeur de l’atsortingbut. id est une propriété réfléchie pure , elle ne modifie ni ne limite la valeur.

  • La propriété type est une propriété reflétée pour l’atsortingbut type : L’obtention de la propriété lit la valeur de l’atsortingbut et la définition de la propriété écrit la valeur de l’atsortingbut. type n’est pas une propriété réfléchie pure car elle est limitée aux valeurs connues (par exemple, les types valides d’une entrée). Si vous aviez , theInput.getAtsortingbute("type") vous donne "foo" mais theInput.type vous donne "text" .

  • En revanche, la propriété value ne reflète pas l’atsortingbut value . Au lieu de cela, c’est la valeur actuelle de l’entrée. Lorsque l’utilisateur modifie manuellement la valeur de la zone de saisie, la propriété value reflétera cette modification. Donc, si l’utilisateur entre "John" dans la zone de saisie, alors:

     theInput.value // returns "John" 

    tandis que:

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

    La propriété value reflète le contenu textuel actuel dans la zone de saisie, tandis que l’atsortingbut value contient le contenu textuel initial de l’atsortingbut 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 cependant connaître la valeur initiale de la zone de texte, lisez l’atsortingbut. Ou vous pouvez utiliser la propriété defaultValue , qui est un reflet pur de l’atsortingbut value :

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

Il existe plusieurs propriétés qui reflètent directement leur atsortingbut ( rel , id ), certaines sont des reflections directes avec des noms légèrement différents ( htmlFor reflète l’atsortingbut for , className reflète l’atsortingbut class ), beaucoup reflètent leur atsortingbut mais avec des ressortingctions / modifications ( src , href , disabled , multiple ), et ainsi de suite. La spécification couvre les différents types de reflection.

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

Il est fou d’avoir certains atsortingbuts (par exemple, id, class, foo, bar ) pour ne conserver qu’un type de valeur dans le DOM, tandis que certains atsortingbuts (par exemple, cochés, sélectionnés ) conservent deux valeurs. c’est-à-dire la valeur “quand elle a été chargée” et la valeur de “l’état dynamic”. (Le DOM n’est-il pas censé représenter l’état du document dans son intégralité?)

Il est absolument essentiel que deux champs de saisie , par exemple un texte et une case à cocher, se comportent de la même manière . Si le champ de saisie de texte ne conserve pas une valeur distincte “quand il a été chargé” et la valeur “dynamic actuelle”, pourquoi la case à cocher? Si la case à cocher a deux valeurs pour l’atsortingbut checked , pourquoi n’en a-t-elle pas deux pour ses atsortingbuts class et id ? Si vous vous attendez à changer la valeur d’un champ text * input *, et que vous attendez que le DOM (la “représentation sérialisée”) change et reflète ce changement, pourquoi ne pas vous attendre à recevoir la même chose d’un champ d’ entrée de tapez case à cocher sur l’atsortingbut coché?

La différenciation de “c’est un atsortingbut booléen” n’a tout simplement aucun sens pour moi, ou du moins n’est pas une raison suffisante pour cela.

eh bien ce sont spécifiés par le w3c ce qui est un atsortingbut et ce qui est une propriété http://www.w3.org/TR/SVGTiny12/atsortingbuteTable.html

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

mais ils préfèrent prop pour certaines choses

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

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

Eh bien en fait vous n’avez pas à changer quelque chose si vous utilisez attr ou prop ou les deux, les deux fonctionnent mais j’ai vu dans ma propre application que prop a fonctionné où atrr n’a pas donc j’ai pris mon app 1.6 app =)