web-dev-qa-db-fra.com

getAttribute () versus propriétés d'objet Element?

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

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

Existe-t-il un problème interserveur avec ces méthodes telles que getAttribute() et setAttribute()?

Ou tout impact sur les performances entre l'accès direct aux propriétés d'objet et l'utilisation de ces méthodes d'attribut?

javascripthtmldom
87
P K

getAttribute récupère le attribut d'un élément DOM, alors que el.id récupère le property de cet élément DOM. Ils ne sont pas les mêmes.

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

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

Par exemple:

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

Ce problème se produit car, selon le W3C , la propriété href doit être un lien bien formé. La plupart des navigateurs respectent cette norme (devinez qui ne le fait pas?).

Il existe un autre cas pour la propriété input 's checked. La propriété DOM renvoie true ou false tandis que l'attribut renvoie la chaîne "checked" ou une chaîne vide.

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

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

En réalité, vous ne devez utiliser les attributs que dans deux cas:

  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 vous êtes sûr que vous en avez besoin (par exemple, la value d'origine d'un élément input).

Si vous souhaitez une explication plus détaillée, je vous suggère fortement de lire cette page . Cela ne vous prendra que quelques minutes, mais vous serez ravis par les informations (que j'ai résumées ici).

114
Florian Margaine

getAttribute('attribute') renvoie normalement la valeur de l'attribut sous forme de chaîne, exactement comme défini dans la source HTML de la page.

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

  • <a href="/foo"></a>
    • a.href contiendra full URL
  • <input type="checkbox" checked>
    • input.checked sera vrai (booléen)
  • <input type="checkbox" checked="bleh">
    • input.checked sera vrai (booléen)
  • <img src='http://dummyimage.com/64x64/000/fff'>
    • img.width sera 0 (nombre) avant le chargement de l'image
    • img.width sera 64 (nombre) lorsque l'image (ou ses premiers octets) est chargée
  • <img src='http://dummyimage.com/64x64/000/fff' width="50%">
    • img.width sera le 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
9
Salman A

.id enregistre la surcharge de l'appel de fonction. (ce qui est très petit, mais vous avez demandé.) 

3
gdoron

Selon ce test jsPerfgetAttribute est plus lent que la propriété id.

PS

Curieusement, les deux instructions sont très mauvaises sur IE8 (comparé à d'autres navigateurs).

3
mamoo

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

  • getAttribute() et setAttribute() sont rompus dans l'ancien IE (et le mode de compatibilité dans les versions ultérieures)
  • les propriétés sont plus pratiques (en particulier celles correspondant aux attributs booléens)

Il y a quelques exceptions :

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

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

3
Tim Down

Essayez ci-dessous exemple pour comprendre cela complètement. Pour le DIV ci-dessous

<div class="myclass"></div>

La Element.getAttribute('class') renverra myclass mais vous devez utiliser Element.className qui le récupère depuis la propriété DOM.

0
Hrushikesh

Un domaine dans lequel cela fait une grande différence est le style CSS basé sur les attributs.

Considérer ce qui suit:

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);
div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}
<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

La div avec la propriété personnalisée définie directement ne reflète pas la valeur de l'attribut et n'est pas sélectionnée par notre sélecteur d'attribut (div[custom]) dans le fichier css.

La div avec l'attribut personnalisé défini à l'aide de setAttribute peut toutefois être sélectionnée à l'aide d'un sélecteur d'attribut css et stylée en conséquence.

0
Jsilvermist