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

Question

Necesito el código JavaScript para repetir los atributos completos en un elemento HTML.

Este Element.attributes ref dice que puedo acceder a él a través del índice, pero no especifico si es bien compatible y si se puede usar (navegador cruzado).

¿O de alguna otra manera? (Sin el uso de marcos, como jQuery/Prototype)

Answer 1

Esto funcionaría en IE, Firefox y Chrome (alguien puede probar los otros por favor — Gracias, @Bryan?):

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

EDIT: itera IE todos los atributos admiten el objeto DOM en cuestión, independientemente de si 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 apoyar esta propiedad, así:

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

Answer 2

Otro método consiste en convertir la colección de atributos a una matriz mediante Array.from:

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

Answer 3

En caso de que alguien está interesado en una versión filtrada o está tratando de construir selectores de atributos CSS, aquí van:

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] 

por supuesto que puede eliminar la unión es posible recuperar una matriz o añadir un filtro para "estilo", ya que en m Más aplicaciones web La etiqueta de estilo es ampliamente manipulada por widgets.