10
votes

Meilleure méthode pour obtenir des attributs de GetElementsByTagname ()?

Je suis en train de jouer avec des attributs d'un lien code> lien de code>, il semble y avoir plusieurs façons d'accéder aux attributs:

document.getElementsByTagName("link")[0]['media']
document.getElementsByTagName("link")[0].media
document.getElementsByTagName("link")[0].getAttribute('media')
document.getElementsByTagName("link")[0].attributes['media']


7 commentaires

Juste une note: les deux premiers compilent à la même chose de la même chose en JavaScript ( .x = ["x"] en général), ce n'est pas spécifique aux attributs d'éléments.


C'est getelementsbytagname , pas getElementyTag .


Dupliqué possible de utiliser getattribute () , ou ne pas utiliser getattribute (): c'est la question


... Mais Jslint se plaint de l'utilisation de la notation carré-support lorsque vous n'êtes pas obligé.


Faites-vous référence à document.getelementythaName ()? Si oui, vous voulez vraiment accéder à un tableau de tous les éléments avec ce tagname pour obtenir des attributs spécifiques de tous les éléments sélectionnés. Ou voulez-vous obtenir les attributs d'un seul élément?


Les deux premières ne sont que des différences de syntaxe, pas des différences d'API, et ils vous donnent la propriété , qui n'est pas nécessairement la même valeur que l'attribut.


Dupliqué possible de à utiliser getattribute () , ou ne pas utiliser getattribute (): c'est la question


4 Réponses :


0
votes

Les deux premières options sont les mêmes. Vous pouvez utiliser soit. Personnellement préférez la version .Media car je pense que cela se lit plus facile.

Les deux dernières options dépendent de getattribute () et setattribute () qui n'ont pas toujours été fiable dans IE. Vous pouvez en lire beaucoup plus sur cela dans le Référence que Matt a posté . En tant que tel, je préfère la version .Media des quatre de vos choix comme la plus fiable et la plus lisible.


0 commentaires

13
votes

J'utiliserais .Media pour ce cas, car support est en effet une propriété sur l'élément de liaison. Chacun de ceux-ci a son utilisation:

  • ['media'] : récupère la valeur de la propriété "multimédia" utilisant la notation de support carré. Utilisez la notation de support carré lorsque vous ne connaissez pas le nom de la propriété au moment de la conception. Par exemple, lors de l'itération des propriétés.
  • .Media : récupère la valeur de la propriété "média". J'utiliserais cela dans la plupart des cas. Il fournit un accès concis et direct à la valeur de la propriété.
  • .getatTtribute ('media') : récupère la valeur d'attribut "multimédia". Utilisez-le lorsque vous souhaitez que la valeur d'un attribut qui ne soit pas nécessairement une propriété sur l'élément. Tous les attributs ne sont pas des propriétés et toutes les propriétés ne sont pas des attributs.
  • .attributes ['media'] : récupère le nœud d'attribut "multimédia". Utilisez la collection Attributs lorsque vous avez besoin de plus d'informations sur un attribut que de la valeur. Par exemple, le nom d'attribut. Vous pouvez également utiliser cela facilement pour obtenir la valeur, car .tostring () renvoie la valeur, mais qui peut être surchargée si tout ce que vous voulez est la valeur. Les attributs sont également utiles pour itérant les attributs d'un élément .

0 commentaires

1
votes

fonctionnellement, ils sont égaux.

performance-sage, les deux premiers sont supérieurs d'un facteur important - bien qu'ils soient tous extrêmement rapides. Voir Ce test JSPERF .

Pratiquement parlant, les deux premiers sont plus faciles à lire et ma préférence personnelle est la seconde. (C'est aussi un cheveu plus rapide.)


0 commentaires

4
votes

La méthode que vous recherchez est appelée getelementsbytagname code>. Il renvoie une liste d'éléments de type tableau (qui n'est pas un tableau).

Notez que votre dernier échantillon .attributes ['media'] code> ne renvoie pas une chaîne comme les autres méthodes. Il renvoie un nœud d'attribut à la place. P>

en théorie Les moyens d'accéder au contenu doivent être équivalents mais les bogues de navigateur ont conduit à un autre comportement en réalité. Il est probablement préférable d'utiliser une couche d'abstraction (une bibliothèque telle que JQuery) pour obtenir un comportement cohérent. Si vous avez l'intention de programmer sans une bibliothèque, le choix dépend de votre goût, mais je dirais que vous alliez via le nœud d'attribut est le plus sûr en général. P>

Pour ajouter un détail plus technique, bien que le retour différent de votre retour De même manière la plupart du temps, cela n'est pas nécessairement vrai pour les attributs inexistants. Prenez le HTML suivant comme exemple: code>. Vous pouvez l'essayer vous-même dans un autre navigateur sur Un test Jsfiddle (la sortie ci-dessous de Firefox). p> xxx pré>

Notez que une fois qu'une URI absolue a été renvoyée, une autre fois que la valeur d'origine a été renvoyée. p> xxx pré> tout ce qui existe sur La charge de page se fusionne dans DOM mais n'est pas disponible en tant que propriété si invalide. P>

// NamedNodeMap of length 4 and indexes other, href, title, rel, title2 (valid attributes or result of setAttribute in order of creation except those from parsing)
console.log(a.attributes);


0 commentaires