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

1. Définition

Propriété : Attribut. Tous les éléments HTML sont représentés par le type HTMLElement. Le type HTMLElement hérite directement de Element et ajoute quelques attributs. Ces attributs ajoutés correspondent aux cinq caractéristiques standards suivantes de chaque élément HTML : id, title, lang, rép, nom de classe. Un nœud DOM est un objet, il peut donc ajouter des propriétés et des méthodes personnalisées comme les autres objets JavaScript. La valeur de la propriété peut être n'importe quel type de données et est sensible à la casse. Les propriétés personnalisées n'apparaîtront pas dans le code HTML, mais existeront uniquement dans js.

Attribut : attribut, différent de la propriété, l'attribut ne peut être qu'une chaîne, insensible à la casse, apparaît en innerHTML, tous les attributs peuvent être répertoriés via les attributs du tableau de classe.

2. Similitudes

Les propriétés et attributs standard du DOM sont synchronisés. Les propriétés reconnues (non personnalisées) sont ajoutées aux objets DOM sous forme d'attributs. Par exemple, id, align, style, etc. À ce stade, vous pouvez utiliser la propriété ou utiliser la méthode DOM pour exploiter les caractéristiques telles que getAttribute() pour exploiter l'attribut. Cependant, le nom de l'attribut transmis à getAttribute() est le même que le nom de l'attribut réel. Par conséquent, "class" doit être transmis lors de l'obtention de la valeur d'attribut de classe.

3. Différences

1). Pour certaines opérations de fonctionnalités standard, il existe des différences dans les valeurs obtenues par getAttribute et le point (.). Tels que href, src, value, style, onclick et d'autres gestionnaires d'événements.
2).href : getAttribute obtient la valeur réelle de href, tandis que le point obtient l'URL complète, il existe donc des différences entre les navigateurs.

Copier le code Le code est le suivant :

<script><br>       var a = document.body.children[0]<br> a.href = '/'<br> alert( 'attribut:' a.getAttribute('href') ) // '/'<br> alert( 'property:' a.href ) // IE : '/', autres : URL complète<br> </script>

Obtenir la valeur de src est similaire à href, mais IE renverra également l'URL complète
 ; La valeur possède également des propriétés intégrées pour la synchronisation « unidirectionnelle ».
Par exemple, input.value est synchronisé à partir de l'attribut (c'est-à-dire que la propriété est synchronisée à partir de l'attribut)

Copier le code Le code est le suivant :

<script><br>       var input = document.body.children[0];<br> ​​​​ input.setAttribute('value', 'new');<br> alert( input.value ); // 'nouveau', input.value modifié<br> alert( input.getAtrribute(value) ); // 'nouveau'<br> </script>

Mais l'attribut ne peut pas être synchronisé à partir de la propriété :

Copier le code Le code est le suivant :

<script><br>         var input = document.body.children[0];<br> ​​​​ input.value = 'nouveau';<br> alert(input.getAttribute('value')); // 'balisage', pas modifié !<br> </script>

getAttribute obtient la valeur initiale, tandis que le point obtient la valeur initiale ou la valeur modifiée de .value. Par exemple, lorsque le visiteur saisit certains caractères, l'attribut 'value' conserve la valeur d'origine après la mise à jour de la propriété. La valeur d'origine peut être utilisée pour vérifier si l'entrée a changé ou pour la réinitialiser.

Pour les gestionnaires d'événements tels que style et onclick, la méthode getAttribute renverra une chaîne lors de l'accès, et le point renvoie la fonction de gestion d'objet et d'événement correspondante.

Pour l'attribut vérifié en entrée

Copier le code Le code est le suivant :

<script><br> var entrée = document.body.children[0]<br> alert( input.checked ) // vrai<br> alert( input.getAttribute('checked') ) // chaîne vide<br> </script>

getAttribute obtient la valeur que vous avez réellement définie. Le point renvoie une valeur booléenne.

Différences de compatibilité des navigateurs

1. Dans les navigateurs IE 2. IE

Copier le code Le code est le suivant :

document.body.abba = 1 // attribuer une propriété (peut maintenant la lire par getAttribute)
document.body.ABBA = 5 // attribuer une propriété avec un autre cas
// doit obtenir une propriété nommée 'ABba' sans tenir compte de la casse.
alert( document.body.getAttribute('ABba') ) // 1

Préférer la propriété

Dans les applications réelles, 98 % des opérations DOM utilisent des propriétés.
Il n'y a que deux situations dans lesquelles vous devez utiliser des attributs

1. Personnalisez les attributs HTML car ils ne sont pas synchronisés avec les propriétés DOM.
2. Accédez aux attributs HTML intégrés, qui ne peuvent pas être synchronisés à partir des propriétés. Par exemple, la valeur de la balise INPUT.