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

Question

Мне нужен код JavaScript для перебора заполненных атрибутов в элементе HTML.

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

Или какими-то другими способами? (без использования каких-либо фреймворков, таких как jQuery / Prototype)

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);
}

РЕДАКТИРОВАТЬ: IE повторяет все атрибуты, которые поддерживает рассматриваемый объект DOM, независимо от того, были ли они на самом деле определены в HTML или нет.

Вы должны взглянуть на логическое свойство 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]

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

Answer 4

Более эффективно

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