LearnJS

Изменение атрибутов в JavaScript

Атрибуты задают настройки HTML-элемента. Через JavaScript можно изменить адрес ссылки, путь к изображению, текстовое описание или собственные данные элемента.

Добавление и изменение атрибута

Метод setAttribute() добавляет атрибут, если его нет, или меняет его значение, если он уже существует.

<img class="avatar" src="/images/avatar-1.jpg" alt="Фото профиля" />
const avatar = document.querySelector('.avatar');

avatar.setAttribute('src', '/images/avatar-2.jpg');
avatar.setAttribute('alt', 'Фото Анны');

После выполнения кода браузер загрузит другое изображение, а текстовое описание изменится. Если перед изменением нужно узнать прежнее значение, используйте avatar.getAttribute(‘src’). Синтаксис метода setAttribute(): element.setAttribute(‘имя’, ‘значение’).

Удаление атрибута

Чтобы убрать атрибут, вызовите removeAttribute(). Например, ссылка может перестать открываться в новой вкладке.

<a class="help-link" href="/help" target="_blank">Помощь</a>
const helpLink = document.querySelector('.help-link');

helpLink.removeAttribute('target');

Атрибут target исчезнет, поэтому ссылка откроется в текущей вкладке.

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

Атрибут описывает разметку, а DOM-свойство часто хранит текущее состояние элемента. Для полей формы и кнопок обычно меняют именно свойства.

<input class="name-input" value="Иван" />
const nameInput = document.querySelector('.name-input');

nameInput.value = 'Анна';

Новое значение появится в поле. Так же работают свойства checkbox.checked и button.disabled.

button.setAttribute(‘disabled’, false) не включит кнопку: атрибут всё равно будет существовать. Для текущего состояния используйте button.disabled = false, а для удаления самого атрибута - removeAttribute(‘disabled’).

data-атрибуты

Для собственных данных в разметке используют атрибуты data-*. В JavaScript к ним удобно обращаться через свойство dataset.

<button class="product-button" data-product-id="42">В корзину</button>
const productButton = document.querySelector('.product-button');

console.log(productButton.dataset.productId); // "42"

productButton.dataset.productId = '73';

Атрибут data-product-id становится свойством dataset.productId. Значения dataset всегда являются строками.

Итого

setAttribute() добавляет или изменяет HTML-атрибут, а removeAttribute() удаляет его. Для data-* используйте dataset. Текущее состояние полей формы и кнопок меняйте через DOM-свойства.