getAttribute() par rapport aux propriétés des objets élémentaires ?

Question

Des expressions comme Element.getAttribute("id") y Element.id renvoient la même chose.

Lequel doit être utilisé lorsque nous avons besoin des attributs d'un objet HTMLElement ?

Ces méthodes posent-elles des problèmes de compatibilité entre navigateurs ? getAttribute() y setAttribute() ?

Y a-t-il un impact sur les performances entre l'accès direct aux propriétés de l'objet et l'utilisation de ces méthodes d'attributs ?

Answer 1

getAttribute récupère le attribut d'un élément DOM, tandis que el.id récupère le propriété de cet élément DOM. Ils ne sont pas identiques.

La plupart du temps, les propriétés DOM sont synchronisées avec les attributs.

Cependant, la synchronisation ne garantit pas la même valeur . Un exemple classique est celui des relations entre el.href y el.getAttribute('href') pour un élément d'ancrage.

Par exemple :

<a href="http://stackoverflow.com/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

Ce comportement se produit parce que, selon le W3C la propriété href doit être un lien bien formé. La plupart des navigateurs respectent cette norme (devinez qui ne la respecte pas ?).

Il y a un autre cas pour le input 's checked propriété. La propriété DOM renvoie true o false tandis que l'attribut renvoie la chaîne de caractères "checked" ou une chaîne vide.

Et puis, il y a certaines propriétés qui sont synchronisées unidirectionnel seulement . Le meilleur exemple est le value d'un input élément. Changer sa valeur via la propriété DOM ne changera pas l'attribut (edit : vérifier le premier commentaire pour plus de précision).

Pour ces raisons, je vous suggère de continuer à utiliser le DOM propriétés et non les attributs, car leur comportement diffère d'un navigateur à l'autre.

En réalité, il n'y a que deux cas où vous devez utiliser les attributs :

1. Un attribut HTML personnalisé, car il n'est pas synchronisé avec une propriété DOM.
2. Pour accéder à un attribut HTML intégré, qui n'est pas synchronisé à partir de la propriété, et que vous êtes sûr d'avoir besoin de l'attribut (par exemple, l'attribut original value d'un input élément).

Si vous voulez une explication plus détaillée, je vous conseille vivement de lire cette page . Cela ne vous prendra que quelques minutes, mais vous serez enchanté par les informations (que j'ai résumées ici).

Answer 2

getAttribute('attribute') renvoie normalement la valeur de l'attribut sous la forme d'une chaîne, exactement telle qu'elle est définie dans la source HTML de la page.

Cependant, element.attribute pourrait retourner une valeur normalisée ou calculée de l'attribut. Exemples :

• <a href="http://stackoverflow.com/foo"></a>
  • a.href contiendra complet URL
• <input type="checkbox" checked>
  • input.checked sera true (booléen)
• <input type="checkbox" checked="bleh">
  • input.checked sera true (booléen)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img.width sera 0 (nombre) avant que l'image ne soit chargée
  • img.width sera de 64 (nombre) lorsque l'image (ou les premiers octets de celle-ci) sera chargée.
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img.width sera la calculé 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.width sera 50 (nombre)
• <div style='background: lime;'></div>
  • div.style sera un objet

Answer 3

.id économise les frais d'appel de fonction. (qui est très faible, mais vous avez demandé. )

Answer 4

Selon ce test jsPerf getAttribute est plus lent que id propriété.

PS

Curieusement, les deux déclarations fonctionnent très mal sur IE8 (par rapport aux autres navigateurs).

Answer 5

Utilisez toujours les propriétés, sauf si vous avez une raison spécifique de ne pas le faire.

• getAttribute() y setAttribute() ne fonctionnent pas dans les anciennes versions d'IE (et en mode de compatibilité dans les versions ultérieures).
• sont plus pratiques (en particulier, celles qui correspondent à des attributs booléens).

Il y a quelques exceptions :

• accéder aux attributs de <form> éléments
• l'accès aux attributs personnalisés (bien que je déconseille l'utilisation des attributs personnalisés)

J'ai écrit sur ce sujet à plusieurs reprises sur SO :

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100