Explication détaillée de la différence entre attribut et propriété dans les connaissances JavaScript_Basic

Les attributs et propriétés des éléments DOM se confondent facilement et ne peuvent pas être clairement distingués. Ce sont des choses différentes, mais elles sont étroitement liées. De nombreux amis novices, dont moi dans le passé, sont souvent confus.

L'attribut est traduit en termes chinois par « caractéristiques », et la propriété est traduite en termes chinois par « attributs ». Par rapport au sens littéral en chinois, il y a en effet une légère différence. Parlons d'abord de l'attribut.

Attribute est un nœud d'attribut. Chaque élément DOM a un attribut d'attributs correspondant pour stocker tous les nœuds d'attribut. Attributes est un conteneur de type tableau. Pour être précis, c'est NameNodeMap. comme un conteneur. Mais ce n'est pas le même conteneur qu'un tableau. Chaque index numérique d'attributs stocke un nœud d'attribut sous la forme d'une paire nom-valeur (name="value").

Copier le code Le code est le suivant :

hello

Le code HTML de l'élément div ci-dessus contient la classe, l'identifiant et l'identifiant de jeu personnalisé. Ces caractéristiques sont stockées dans des attributs, similaires à la forme suivante :

Copier le code Le code est le suivant :

[ class="box", id="box", gameid ="880 " ]

Vous pouvez accéder au nœud d'attribut comme ceci :

Copiez le code Le code est comme suit :

var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); ( elem.attributes[0].value ); // boîte

Mais IE6-7 stocke beaucoup de choses dans les attributs, et la méthode d'accès ci-dessus renvoie des résultats différents de ceux du navigateur standard. Généralement, pour obtenir un nœud d'attribut, utilisez directement la méthode getAttribute :

Copiez le code Le code est le suivant :

console.log( elem.getAttribute('gameid') ); // 880

Pour définir un nœud d'attribut, utilisez la méthode setAttribute. Pour le supprimer, utilisez RemoveAttribute :

Copier le code Le code est le suivant :

elem.setAttribute('testAttr', 'testVal') ;

console.log( elem.removeAttribute('gameid') ); // non défini

Les attributs seront mis à jour dynamiquement à mesure que des nœuds d'attribut sont ajoutés ou supprimés.

La propriété est une propriété. Si l'élément DOM est considéré comme un objet Object ordinaire, alors la propriété est une propriété stockée dans l'objet sous la forme d'une paire nom-valeur (name="value"). Il est beaucoup plus facile d'ajouter et de supprimer des propriétés, pas différentes des objets ordinaires :

Copier le code Le code est le suivant :

elem.gameid = 880; // Ajouter
console.log( elem.gameid ) // Récupérer
delete elem.gameid // Supprimer

La raison pour laquelle les attributs et les propriétés sont facilement confondus est que de nombreux nœuds d'attribut ont également un attribut de propriété correspondant. Par exemple, l'identifiant et la classe de l'élément div ci-dessus sont à la fois des attributs et des propriétés correspondantes, quel que soit celui utilisé. . Les méthodes sont accessibles et modifiables.

Copier le code Le code est le suivant :

console.log( elem.getAttribute(' id') ); // box
console.log( elem.id ); // box
elem.id = 'bonjour';
console.log( elem.getAttribute('id') ) ; // bonjour

Mais pour les nœuds d'attributs personnalisés ou les propriétés personnalisées, les deux n'ont rien à voir l'un avec l'autre.

Copier le code Le code est le suivant :

console.log( elem.getAttribute(' gameid') ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // nul

Pour IE6-7, il n'y a pas de distinction entre attribut et propriété :

Copier le code Le code est le suivant :

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

De nombreux amis novices peuvent facilement tomber dans ce gouffre.
Certains nœuds d'attributs communs par défaut des éléments DOM ont des attributs de propriété correspondants. Ce qui est plus spécial, certaines propriétés dont les valeurs sont de type booléen, comme certains éléments de formulaire :

Copier le code Le code est le suivant :

var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // vérifié
console .log( radio.checked ); // vrai

Pour ces nœuds d'attributs spéciaux, tant que le nœud existe, la valeur de la propriété correspondante est vraie, telle que :

Copier le codeLe code est le suivant :

var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // n'importe quoi
console.log( radio.checked );
Enfin, afin de mieux distinguer l'attribut et la propriété, on peut résumer essentiellement que les nœuds d'attribut sont visibles dans le code HTML, alors que la propriété n'est qu'un attribut de paire nom-valeur ordinaire.

Copier le code Le code est le suivant : // gameid et id sont tous deux des nœuds d'attribut

//L'identifiant est également accessible et modifié via la propriété

hello

//areaid est juste une propriété
elem.areaid = 900;