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

2.3 Middle🔥 124 комментариев

#JavaScript Core

Комментарии (4)

🐱

claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Методы просмотра атрибутов элемента

Есть несколько способов получить и отобразить все установленные атрибуты HTML элемента. Рассмотрим самые практичные и распространенные из них.

1. Свойство attributes (NamedNodeMap)

Самый прямой способ - использовать встроенное свойство attributes, которое возвращает коллекцию NamedNodeMap всех атрибутов элемента.

const element = document.getElementById('myElement');

// Получить все атрибуты как NamedNodeMap
const attrs = element.attributes;

// Итерировать через все атрибуты
for (let i = 0; i < attrs.length; i++) {
  const attr = attrs[i];
  console.log(attr.name + ' = ' + attr.value);
}

// Или преобразовать в объект
const attrsObject = {};
for (let attr of element.attributes) {
  attrsObject[attr.name] = attr.value;
}
console.log(attrsObject);

2. Методы getAttribute и getAttributeNames

getAttributeNames() возвращает массив имен всех атрибутов - удобнее, чем работать с NamedNodeMap.

const element = document.querySelector('div');

// Получить все имена атрибутов
const attrNames = element.getAttributeNames();
console.log(attrNames); // массив имен атрибутов

// Получить значения всех атрибутов
const allAttrs = {};
attrNames.forEach(name => {
  allAttrs[name] = element.getAttribute(name);
});

console.log(allAttrs);

3. Преобразование в JSON

Для удобного логирования и дебага можно преобразовать все атрибуты в читаемый формат.

function getAllAttributes(element) {
  const attrs = {};
  
  for (let attr of element.attributes) {
    attrs[attr.name] = attr.value;
  }
  
  return attrs;
}

function logAllAttributes(element) {
  const attrs = getAllAttributes(element);
  console.table(attrs); // красивый вывод
  console.log(JSON.stringify(attrs, null, 2));
}

logAllAttributes(document.body);

4. Реальный пример с фильтрацией

class AttributeInspector {
  constructor(selector) {
    this.element = document.querySelector(selector);
  }
  
  getAllAttributes() {
    const result = {};
    for (let attr of this.element.attributes) {
      result[attr.name] = attr.value;
    }
    return result;
  }
  
  getDataAttributes() {
    return Object.fromEntries(
      this.element.getAttributeNames()
        .filter(name => name.startsWith('data-'))
        .map(name => [name, this.element.getAttribute(name)])
    );
  }
  
  getAriaAttributes() {
    return Object.fromEntries(
      this.element.getAttributeNames()
        .filter(name => name.startsWith('aria-'))
        .map(name => [name, this.element.getAttribute(name)])
    );
  }
  
  inspect() {
    console.group('Атрибуты элемента');
    console.log('Элемент:', this.element);
    console.log('Все атрибуты:', this.getAllAttributes());
    console.log('Data атрибуты:', this.getDataAttributes());
    console.log('ARIA атрибуты:', this.getAriaAttributes());
    console.groupEnd();
  }
}

const inspector = new AttributeInspector('#myDiv');
inspector.inspect();

5. Отличие от свойств

Важно различать атрибуты (attributes) и свойства (properties) DOM элемента.

const input = document.querySelector('input');

// Атрибут (из HTML)
input.getAttribute('value'); // изначальное значение

// Свойство (текущее состояние)
input.value; // текущее значение в поле