javascript - eliminar - ¿Cómo iterar a través de todos los atributos en un elemento HTML?

setattribute javascript

Question

Necesito el código JavaScript para iterar a través de los atributos rellenos en un elemento HTML.

Esta referencia de Element.attributes dice que puedo acceder a ella a través del índice, pero no especifica si está bien soportado y si se puede usar (navegador cruzado).

O de alguna otra manera? (sin utilizar ningún framework, como jQuery / Prototype)

Answer 1

En caso de que alguien esté interesado en una versión filtrada, o intente crear selectores de atributos CSS, aquí tiene:

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]

Sin duda, puede eliminar la unión para recuperar una matriz o agregar un filtro para "estilo", ya que en la mayoría de las aplicaciones web la etiqueta de estilo es ampliamente manipulada por widgets.

Answer 2

Esto funcionaría en IE, Firefox y Chrome (¿alguien puede probar los demás? Gracias, @Bryan):

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

EDITAR: IE itera todos los atributos que admite el objeto DOM en cuestión, sin importar si realmente se han definido en HTML o no.

Debe mirar la propiedad booleana attrib.specified para averiguar si el atributo realmente existe. Firefox y Chrome parecen ser compatibles con esta propiedad también:

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

Answer 3

Más eficiente

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

Answer 4

Otro método es convertir la colección de atributos en una matriz usando Array.from :

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