getAttribute() в JavaScript

• Чтение значения атрибута
• Если атрибута нет
• Атрибут или свойство
• Итого

Чтение значения атрибута

Метод getAttribute() возвращает значение указанного HTML-атрибута в виде строки.

<a class="profile-link" href="/profile">Профиль</a>

const profileLink = document.querySelector('.profile-link');

console.log(profileLink.getAttribute('href')); // /profile

Синтаксис метода: element.getAttribute(‘имя’).

Если атрибута нет

Если атрибут отсутствует, getAttribute() вернёт null, а не undefined.

console.log(profileLink.getAttribute('target')); // null

Пустое значение и отсутствие атрибута - разные ситуации. Например, для <button disabled> вызов getAttribute(‘disabled’) вернёт пустую строку "". Чтобы проверить именно наличие атрибута, используйте hasAttribute().

Атрибут или свойство

getAttribute() читает значение из HTML-разметки. DOM-свойство может содержать текущее состояние элемента.

<input class="name-input" value="Иван" />

const nameInput = document.querySelector('.name-input');

nameInput.value = 'Анна';

console.log(nameInput.getAttribute('value')); // Иван
console.log(nameInput.value); // Анна

Для текущего значения поля используйте input.value, для состояния чекбокса - checkbox.checked, а для кнопки - button.disabled.

Чтобы добавить или изменить атрибут, используйте setAttribute(), а чтобы удалить - removeAttribute().

Итого

getAttribute() возвращает строковое значение атрибута или null, если атрибута нет. Для текущего состояния элементов формы используйте их DOM-свойства.