1. Définition
Propriété: Propriété, tous les éléments HTML sont représentés par le type HTMLelement. Le type htmlelement hérite directement de l'élément et ajoute certains attributs. Les attributs ajoutés correspondent à chaque élément HTML avec les 5 caractéristiques standard suivantes: id, titre, lang, dir, 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 d'autres objets JavaScript. La valeur de la propriété peut être n'importe quel type de données, qui est sensible à la casse, et la propriété personnalisée n'apparaîtra pas dans le code HTML, mais n'existe que dans JS.
Attribut: la fonctionnalité, différente de la propriété, l'attribut ne peut être qu'une chaîne, insensible à la cas, apparaît dans innerHTML, et tous les attributs peuvent être répertoriés via des attributs de tableau de classe.
2. Similitudes
Les propriétés DOM standard sont synchronisées avec des attributs. Un attribut reconnu (non personnalisé) est ajouté à l'objet DOM en tant que propriété. Par exemple, id, aligner, style, etc., pour le moment, les propriétés peuvent être exploitées par des méthodes de propriété ou DOM d'exploitation telles que getAttribute () qui utilisent les caractéristiques de fonctionnement. Cependant, le nom d'attribut passé pour getAttribute () est le même que le nom d'attribut réel. Par conséquent, lors de l'obtention de la valeur caractéristique de la classe, vous devez passer en "classe".
3. Différences
1). Pour certaines caractéristiques standard, il y a une différence dans les valeurs obtenues par getAttribute et Point (.). Comme HREF, SRC, Valeur, Style, OnClick et d'autres gestionnaires d'événements.
2) .href: GetAttribute obtient la valeur réelle de HREF, tandis que les points obtiennent l'URL complète, qui a une différence de navigateur.
La copie de code est la suivante:
<cript>
var a = document.body.children [0]
a.href = '/'
alert ('attribut:' + a.getAttribute ('href')) // '/'
alert ('propriété:' + a.href) // ie: '/', autres: URL complète
</cript>
La valeur de SRC est similaire à HREF, mais IE renvoie également une URL complète;
La valeur de valeur a également certaines propriétés intégrées pour la synchronisation «unidirectionnelle» (unidirectionnelle).
Par exemple, Input.Value Synchronize à partir d'attribut (c'est-à-dire que la propriété obtient une synchronisation à partir d'attribut)
La copie de code est la suivante:
<input type = "text" value = "markup">
<cript>
var input = document.body.children [0];
input.setAttribute ('Value', 'New');
alerte (input.value); // «nouveau», entrée.Value a changé
alert (input.getatrriobute (valeur)); // 'nouveau'
</cript>
Mais l'attribut ne peut pas obtenir de synchronisation à partir de la propriété:
La copie de code est la suivante:
<input type = "text" value = "markup">
<cript>
var input = document.body.children [0];
input.value = 'new';
alert (input.getAttribute ('valeur')); // "Marquage", pas changé!
</cript>
GetAttribute obtient la valeur initiale, tandis que les points obtiennent la valeur initiale ou la valeur modifiée .value. Par exemple, lorsque le visiteur entre dans certains caractères, l'attribut «valeur» maintient la valeur d'origine une fois la propriété à jour. La valeur d'origine peut être utilisée pour vérifier si l'entrée change ou pour la réinitialiser.
Pour les gestionnaires d'événements tels que Style et ONClick, la méthode GetAttribute renvoie une chaîne lorsqu'il est accessible, tandis que le point renvoie la fonction d'objet et de gestionnaire d'événements correspondant.
Pour la propriété vérifiée en entrée
La copie de code est la suivante:
<cript>
var input = document.body.children [0]
alerte (input.checked) // true
alert (input.getAttribute ('vérifié')) // chaîne vide
</cript>
GetAttribute obtient la valeur que vous définissez réellement. Le point renvoie une valeur booléenne.
Différences de compatibilité du navigateur
1. Dans IE <9 navigateurs, vous pouvez utiliser les numéros de points et GetAttribute pour accéder aux propriétés personnalisées les unes entre les autres.
2. IE <8 (y compris le mode de compatibilité IE8 IE7), la propriété et l'attribut sont les mêmes. Parce que l'attribut n'est pas sensible à la casse, dans ce cas, lorsque vous utilisez GetAttribute pour accéder à la fonction, le navigateur sélectionnera la valeur qui apparaît pour la première fois.
La copie de code est la suivante:
Document.body.abba = 1 // Assignez la propriété (peut maintenant le lire par getAttribute)
document.body.abba = 5 // Attribuez une propriété avec un autre cas
// doit obtenir une propriété nommée «Abba» de manière insensible à la cas.
alert (document.body.getAttribute ('abba')) // 1
Propriété prioritaire
Dans les applications réelles, 98% des opérations DOM utilisent des propriétés.
Il n'y a que deux situations qui nécessitent l'utilisation d'attributs
1. Personnaliser les attributs HTML car il n'est pas synchronisé avec la propriété DOM.
2. Accédez aux attributs HTML intégrés, qui ne peuvent pas être synchronisés à partir de la propriété. Par exemple, la valeur de valeur de la balise d'entrée.