web-dev-qa-db-fra.com

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

J'ai besoin du code JavaScript pour parcourir les attributs remplis dans un élément HTML.

Ce Element.attributes ref indique que je peux y accéder via index, mais ne précise pas s'il est bien pris en charge et si il peut être utilisé (multi-navigateur).

Ou d'une autre manière? (sans utiliser de framework, comme jQuery/Prototype)

javascripthtmldom
36
Robinicks

Cela fonctionnerait 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: IE itère tout attribue la prise en charge de l'objet DOM en question, qu'il ait été défini en HTML ou non. 

Vous devez consulter la propriété booléenne attrib.specified pour savoir si l'attribut existe réellement. Firefox et Chrome semblent également supporter cette propriété:

for (var i = 0; i < elem.attributes.length; i++) {
    var attrib = elem.attributes[i];
    if (attrib.specified) {
        console.log(attrib.name + " = " + attrib.value);
    }
}
43
Tomalak

Une autre méthode consiste à convertir la collection d'attributs en un tableau à l'aide de Array.from :

Array.from(element.attributes).forEach(attr => {
  // process attr
})
5
Lloyd

Si quelqu'un est intéressé par une version filtrée ou tente de créer des sélecteurs d'attributs CSS, voici ce que vous devez faire:

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 ajouter un filtre pour "style" car dans la plupart des applications Web, la balise de style est largement manipulée par des widgets.

1
N-ate

Plus efficace

Array.prototype.forEach.call(Elm.attributes, attr => console.log(attr))
0
Danny Raufeisen