L'attribut et la propriété de l'élément DOM sont faciles à mélanger et ne peuvent pas être distingués. Les deux sont des choses différentes, mais les deux sont étroitement liées. De nombreux nouveaux amis, dont moi dans le passé, ne le comprennent souvent pas.
L'attribut est traduit dans le terme chinois "caractéristiques", et la propriété est traduite dans le terme chinois "attribut". De la signification littérale du chinois, il y a en effet une petite différence. Parlons d'abord de l'attribut.
L'attribut est un nœud de fonctionnalité. Chaque élément DOM a un attribut d'attribut Attributs correspondant pour stocker tous les nœuds d'attribut. Les attributs sont un conteneur d'une classe de tableau. Pour être précis, c'est namenodemap. En bref, il s'agit d'un conteneur similaire à un tableau mais pas tout à fait le même qu'un tableau. Chaque index numérique des attributs stocke un nœud d'attribut sous la forme d'une paire de valeurs de nom (name = ”value”).
Copiez le code comme suit: <div id = "box" gameid = "880"> Bonjour </div>
Le code HTML de l'élément DIV ci-dessus comprend la classe, l'ID et le jeu personnalisé. Ces fonctionnalités sont stockées dans des attributs, similaires au formulaire suivant:
Copiez le code comme suit: [, id = "box", gameid = "880"]
Vous pouvez accéder au nœud d'attribut comme ceci:
La copie de code est la suivante:
var elem = document.getElementById ('box');
console.log (elem.attributes [0] .name); // classe
console.log (elem.attributes [0] .Value); // boîte
Cependant, IE6-7 stocke beaucoup de choses dans les attributs, et la méthode d'accès ci-dessus est différente des résultats de retour du navigateur standard. Habituellement, vous devez obtenir un nœud d'attribut et utiliser directement la méthode GetAttribute:
Copiez le code comme suit: console.log (elem.getAttribute ('gameId')); // 880
Pour définir un nœud d'attribut pour utiliser la méthode setAttribute, utilisez RemoveAtTribute pour supprimer:
La copie de code est la suivante: elem.setAttribute ('TestAttr', 'TestVal');
Console.log (elem.reMoveAttribute ('gameId')); // indéfini
Les attributs seront mis à jour dynamiquement à mesure que les nœuds d'attribut seront ajoutés ou supprimés.
la propriété est une propriété. Si l'élément DOM est considéré comme un objet ordinaire, la propriété est une propriété stockée dans l'objet sous la forme d'une paire de valeurs de nom (name = ”Value”). Il est beaucoup plus facile d'ajouter et de supprimer les propriétés, et ce n'est pas différent des objets ordinaires:
La copie de code est la suivante:
elem.gameid = 880; // Ajouter
console.log (elem.gameid) //
supprimer elem.gameid // supprimer
La raison pour laquelle l'attribut et la propriété sont faciles à mélanger est que de nombreux nœuds d'attribut ont un attribut de propriété correspondant, tel que l'ID et la classe de l'élément DIV ci-dessus sont à la fois des attributs et des propriétés correspondantes, qui peuvent être accessibles et modifiées quelle que soit la méthode utilisée.
La copie de code est la suivante:
console.log (elem.getAttribute ('id')); // boîte
console.log (elem.id); // boîte
elem.id = 'bonjour';
console.log (elem.getAttribute ('id')); // Bonjour
Mais pour les nœuds d'attribut personnalisés ou les propriétés personnalisées, les deux n'ont rien à voir les uns avec les autres.
La copie de code est la suivante:
console.log (elem.getAttribute ('gameId')); // 880
console.log (elem.gameid); // indéfini
elem.Areaid = '900';
Console.log (elem.getAttribute ('AreaDID')) // NULL
Pour IE6-7, il n'y a pas de distinction entre l'attribut et la propriété:
La copie de code est la suivante:
console.log (elem.getAttribute ('gameId')); // 880
console.log (elem.gameid); // 880
elem.Areaid = '900';
Console.log (elem.getAttribute ('AreaDID')) // 900
De nombreux novices tombent probablement facilement dans cette fosse.
Certains nœuds d'attribut communs des éléments DOM ont des attributs de propriété correspondants. Ce qui est plus spécial, ce sont certaines propriétés avec la valeur du type booléen, comme certains éléments de forme:
La copie de code est la suivante:
<input type = "radio" checked = "checked" id = "raido">
var radio = document.getElementById ('radio');
console.log (radio.getAttribute («vérifié»)); // vérifié
Console.log (radio.Checked); // vrai
Pour ces nœuds d'attribut spéciaux, seulement si ce nœud existe, la valeur de propriété correspondante est vraie, telle que:
La copie de code est la suivante:
<input type = "radio" checked = "tout ce" id = "raido">
var radio = document.getElementById ('radio');
console.log (radio.getAttribute («vérifié»)); // rien
Console.log (radio.Checked); // vrai
Enfin, afin de mieux distinguer l'attribut et la propriété, il peut être condamné essentiellement que les nœuds d'attribut sont visibles dans le code HTML, et la propriété n'est qu'un attribut de paire de valeurs de nom ordinaire.
La copie de code est la suivante:
// GameID et ID sont des nœuds d'attribut
// ID peut également être consulté et modifié via la propriété
<div gameid = "880" id = "box"> Bonjour </div>
// AreaDID est juste une propriété
elem.aaid = 900;