Как перебирать все атрибуты в элементе HTML?

Question

Мне нужен код JavaScript, чтобы перебирать заполненные атрибуты в HTML-элементе.

Этот Element.attributes ref говорит, что я могу получить к нему доступ по индексу, но не указывая, хорошо ли он поддерживается и может использоваться (кросс-браузер).

Или любым другим способом? (Без использования каких-либо рамок, как JQuery/Прототип)

Answer 1

Это будет работать в IE, Firefox и Chrome (может кто-нибудь проверить другие пожалуйста — Спасибо, @Bryan?):

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

EDIT: IE итерацию все связывает объект DOM, о котором идет речь, независимо от того, были ли они фактически определены в HTML или нет.

Чтобы узнать, действительно ли атрибут существует, вы должны изучить Boolean свойство attrib.specified. Firefox и Chrome, кажется, поддерживает это свойство, а также:

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

Другой метод заключается в преобразовании коллекции атрибутов в массив с помощью Array.from:

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

Answer 3

В случае, если кто заинтересован в отфильтрованной версии, или пытается создать атрибут CSS селекторы, здесь вы идете:

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] 

вы можете, конечно, удалить присоединиться к извлечь массив или добавить фильтр для «стиля», так как в м ost веб-приложений тег стиля широко управляется виджетами.