Атрибуты: getAttribute, setAttribute

getAttribute(name) и setAttribute(name, value) — методы для работы с HTML-атрибутами элемента в виде строк, в отличие от DOM-свойств, которые отражают текущее состояние и могут иметь нестроковый тип.

Зачем нужно

Атрибуты и свойства DOM — не одно и то же. setAttribute всегда работает с атрибутами в HTML-разметке (строки), тогда как прямое свойство (el.checked, el.value) отражает текущее состояние элемента. Понимание разницы важно при работе с нестандартными атрибутами, aria-*, data-* и начальными значениями форм.

Где используется

  • Установка и чтение aria-* атрибутов для доступности
  • Управление нестандартными атрибутами (tabindex, role, for)
  • Проверка наличия атрибута через hasAttribute
  • Начальные значения форм (атрибут value vs свойство value)

Методы

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

// Установить атрибут
input.setAttribute('placeholder', 'Введите имя');
input.setAttribute('disabled', '');          // булев атрибут — любое значение
input.setAttribute('aria-label', 'Имя пользователя');

// Прочитать атрибут (всегда строка или null)
input.getAttribute('placeholder'); // 'Введите имя'
input.getAttribute('maxlength');   // '10' (строка, не число)
input.getAttribute('missing');     // null

// Проверить наличие
input.hasAttribute('disabled'); // true / false

// Удалить атрибут
input.removeAttribute('disabled');

// Все атрибуты
input.attributes; // NamedNodeMap — живая коллекция
[...input.attributes].forEach(attr => {
  console.log(attr.name, attr.value);
});

Атрибуты vs свойства DOM

// HTML: <input type="text" value="Начальное">
const input = document.querySelector('input');
input.value = 'Изменённое'; // пользователь или JS изменил поле

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

// Свойство — текущее состояние
input.value; // 'Изменённое'

// Аналогично для checked, selected:
// атрибут checked — начальное состояние
// свойство checked — текущее

Практические примеры

Управление aria-атрибутами

function toggleMenu(btn, menu) {
  const isOpen = menu.hidden;
  menu.hidden = !isOpen;

  // Обновить aria для скринридеров
  btn.setAttribute('aria-expanded', String(!isOpen));
  menu.setAttribute('aria-hidden', String(isOpen));
}

Условное добавление атрибута

function setDisabled(el, disabled) {
  if (disabled) {
    el.setAttribute('disabled', '');
  } else {
    el.removeAttribute('disabled');
  }
}

Нестандартные атрибуты

// Можно, но лучше использовать data-атрибуты для кастомных данных
el.setAttribute('my-custom', 'value'); // нестандартный атрибут

// Предпочтительно:
el.dataset.myCustom = 'value'; // data-my-custom="value"

Частые ошибки

  • Путать атрибут value и свойство value — атрибут — начальное значение, свойство — актуальное; для чтения текущего значения поля используйте свойство.
  • getAttribute возвращает строку, не число — не забывайте привести тип: Number(el.getAttribute('tabindex')).
  • Установка булевых атрибутов — для disabled, checked, selected наличие атрибута важно, а не его значение; removeAttribute('disabled') убирает отключение.

Связанные темы

Ресурсы