Comment parcourir tous les attributs d'un élément HTML?

J'ai besoin du code JavaScript pour itérer sur les attributs d'un élément HTML.

Ce De l'élément.attributs réf dit que je peux y accéder via l'index, mais ne précise pas si il est bien pris en charge et peut être utilisé (cross-browser).

Ou de toute autre manière? (sans utiliser de cadres, comme jQuery /Prototype)

InformationsquelleAutor Robinicks | 2009-05-06

49

Ce serait le travail dans IE, Firefox et Chrome (quelqu'un peut-il tester les autres s'il vous plaît? — Merci, @Bryan):
```
for (var i = 0; i < elem.attributes.length; i++) {
    var attrib = elem.attributes[i];
    console.log(attrib.name + " = " + attrib.value);
}
```
EDIT: c'est à dire itère tous attributs de l'objet DOM en question prend en charge, peu importe si elles ont effectivement été défini en HTML ou pas.

Vous devez regarder le attrib.specified propriété Booléenne pour savoir si l'attribut existe réellement. Firefox et Chrome semblent appuyer cette propriété ainsi:
```
for (var i = 0; i < elem.attributes.length; i++) {
    var attrib = elem.attributes[i];
    if (attrib.specified) {
        console.log(attrib.name + " = " + attrib.value);
    }
}
```
- Fonctionne à l'Opéra et Safari aussi.
- Cet exemple ne fonctionne pas pour moi. Il semble que elem n'est pas défini. Ce que je fais mal ici?
- Si vous pensez à ce sujet pendant un moment, il viendra à vous.
- J'ai essayé d'utiliser var elem = document.getElementById("Something");, mais ça ne fonctionne pas non plus, comme on le voit ici.
- Cet exemple alertes id = Something pour moi, ce qui est exactement ce qui est censé se produire. Vous attendiez-vous à autre chose?
- J'ai pensé qu'il était censé récursive de l'itération à travers les attributs de tous les sous-éléments de l'élément premier, depuis que j'ai interprété la question.
- Le mot "récursivement" n'apparaissent que sur la question. Interaction n'implique pas la récursivité. Vous aurez à mettre en œuvre la récursivité vous-même.
- Vous devriez éviter d'appeler attributes tant de fois; cache dans une variable locale!
- L'optimisation prématurée. DOM interactions de ce genre sont extrêmement rapides. (Oui, je sais, la mise en cache rend cela plus rapidement, mais ce bit très, très probable de ne pas être le goulot d'étranglement de la page.)
- Mettons-nous d'accord d'être en désaccord. Votre algorithme est en O(n^2), où n est le nombre d'attributs. Si vous ne modifiez pas la O() d'un algorithme, c'est bien, mais écrire quelque chose dans O(n) au lieu de O(n^2) est une bonne pratique, pas prématuré, de l'OMI.
- Je ne suis pas sûr si une boucle est assez complexe pour appeler un algorithme. Je suis également pas tout à fait sûr de l'endroit où vous obtenez l'idée que ce serait prendre O(n2) de temps. elem.attributes.length est très probablement O(1), elem.attributes[i] est certainement O(1) - donc, comme je vois la chose entière est O(n). Mais même si je me trompe: Il n'a pas d'importance. Si vous appelez cela pour chaque élément sur votre page, vous le faites mal, de toute façon. L'enfer, même alors, il ne prend que 8ms pour cette page ici sur mon rusty ordinateur portable. Et c'est avec jQuery $.each(). En bref: je ne pouvais pas moins de soins sur l'exécution caractéristiques de ce bit.
InformationsquelleAutor Tomalak
7

Une autre méthode consiste à convertir la collection d'attribut d'un tableau à l'aide Array.à partir de:
```
Array.from(element.attributes).forEach(attr => {
  console.log(`${attr.nodeName}=${attr.nodeValue}`);
})
```
InformationsquelleAutor Lloyd
3

Au cas où quelqu'un est intéressé par une version filtrée, ou est en train d'essayer de construire attribut CSS sélecteurs, ici vous allez:
```
let el = document.body;
Array.from(el.attributes)
    .filter(a => { return a.specified && a.nodeName !== 'class'; })
    .map(a => { return '[' + a.nodeName + '=' + a.textContent + ']'; })
    .join('');

//outputs: "[name=value][name=value]
```
Vous pouvez certainement supprimer la jointure pour récupérer un tableau ou d'ajouter un filtre pour le "style", car dans la plupart des applications web de la balise style est largement manipulé par des widgets.

InformationsquelleAutor N-ate

Plus efficace

Array.prototype.forEach.call(elm.attributes, attr => console.log(attr))

InformationsquelleAutor Danny Raufeisen

Vous devez vous connecter pour publier un commentaire.