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

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

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

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

Ответы

Ответ 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 или нет.

Вы должны посмотреть на свойство attrib.specified Boolean, чтобы узнать, действительно ли атрибут существует. Возможно, 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);
    }
}

Ответ 2

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

Array.from(element.attributes).forEach(attr => {
  console.log('${attr.nodeName}=${attr.nodeValue}');
})

Ответ 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]

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

Ответ 4

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

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