1. Зачем работать с атрибутами через JS?
Если вы когда-либо писали HTML, то уж точно видели всякие штуки вроде:
<a href="https://google.com" target="_blank">Google</a>
<img src="cat.png" alt="Котик">
<input type="checkbox" checked>
<button disabled>Нельзя нажать</button>
Вот эти href, src, alt, checked, disabled и есть атрибуты. Они задают поведение и внешний вид элемента на странице. Хорошая новость: через JavaScript мы можем читать, менять и даже удалять эти атрибуты "на лету", не перезагружая страницу!
Изменение атрибутов на лету — это основа интерактивности на современных сайтах. Вот несколько примеров из жизни:
- Пользователь нажал на кнопку "Показать картинку" — мы меняем атрибут src у изображения, и оно меняется на глазах.
- Надо временно отключить кнопку отправки формы? Устанавливаем ей атрибут disabled.
- Проверяем, есть ли у чекбокса атрибут checked — и делаем вид, что умеем читать мысли пользователя.
- Нужно добавить кастомный атрибут для хранения дополнительной информации? Легко!
2. Основные методы: getAttribute, setAttribute, removeAttribute
Метод getAttribute — получить значение атрибута
Синтаксис:
element.getAttribute('имя_атрибута')Возвращает строку с текущим значением атрибута или null, если такого атрибута нет.
Пример:
<img id="cat" src="cat.png" alt="Мурзик">
const img = document.getElementById('cat');
console.log(img.getAttribute('src')); // "cat.png"
console.log(img.getAttribute('alt')); // "Мурзик"
console.log(img.getAttribute('title')); // null (такого атрибута нет)
Метод setAttribute — установить или изменить атрибут
Синтаксис:
element.setAttribute('имя_атрибута', 'значение')Если атрибута нет — он будет создан. Если есть — его значение заменится.
Пример:
img.setAttribute('src', 'dog.png'); // Теперь картинка — собака!
img.setAttribute('alt', 'Барбос'); // Новый alt-текст
img.setAttribute('title', 'Собачка'); // Добавили всплывающую подсказку
Метод removeAttribute — удалить атрибут
Синтаксис:
element.removeAttribute('имя_атрибута')Удаляет указанный атрибут. Если его нет — ничего страшного не произойдет.
Пример:
img.removeAttribute('alt'); // Теперь у картинки нет alt-текста
img.removeAttribute('title'); // Убрали подсказку
3. Практика: делаем страницу интерактивной
Давайте шаг за шагом добавим немного магии в наше учебное приложение. Пусть у нас есть страница с картинкой и кнопками для управления ею:
<img id="main-img" src="cat.png" alt="Котик" width="200">
<br>
<button id="btn-dog">Показать собаку</button>
<button id="btn-hide">Спрятать картинку</button>
<button id="btn-show">Показать картинку</button>
Меняем картинку по кнопке
const img = document.getElementById('main-img');
const btnDog = document.getElementById('btn-dog');
btnDog.onclick = function() {
img.setAttribute('src', 'dog.png');
img.setAttribute('alt', 'Собачка');
};
Теперь при нажатии на кнопку картинка и alt-текст меняются!
Прячем и показываем изображение
const btnHide = document.getElementById('btn-hide');
const btnShow = document.getElementById('btn-show');
btnHide.onclick = function() {
img.setAttribute('hidden', 'true'); // Атрибут hidden делает элемент невидимым
};
btnShow.onclick = function() {
img.removeAttribute('hidden'); // Удаляем атрибут — картинка снова видна
};
Внимание: Атрибут hidden — стандартный способ спрятать элемент на странице, и он работает во всех современных браузерах.
4. Особенности работы с булевыми атрибутами
Некоторые атрибуты в HTML существуют просто по факту своего наличия. Например: checked, disabled, readonly, hidden. Если такой атрибут есть — он считается "включённым", если нет — "выключённым".
Пример с чекбоксом:
<input type="checkbox" id="agree" checked>
const checkbox = document.getElementById('agree');
console.log(checkbox.getAttribute('checked')); // "": просто наличие атрибута
checkbox.removeAttribute('checked'); // Снимаем галочку
checkbox.setAttribute('checked', ''); // Ставим галочку обратно
Фишка: Для булевых атрибутов значение обычно не важно — главное, чтобы атрибут был или не был.
5. Кастомные атрибуты: data-*
Иногда хочется хранить в элементе свою дополнительную информацию. Для этого придумали специальные атрибуты, которые начинаются с data-:
<div id="user" data-user-id="42" data-role="admin">Пользователь</div>
const userDiv = document.getElementById('user');
console.log(userDiv.getAttribute('data-user-id')); // "42"
console.log(userDiv.getAttribute('data-role')); // "admin"
// Можно менять!
userDiv.setAttribute('data-role', 'guest');
Бонус: В современных браузерах у таких атрибутов появляется удобное свойство dataset:
console.log(userDiv.dataset.userId); // "42"
console.log(userDiv.dataset.role); // "guest"
userDiv.dataset.role = 'moderator'; // Меняем роль через dataset
6. Атрибуты vs свойства DOM-объектов
Внимание, сейчас будет лёгкий mind-blow! В JavaScript у DOM-элементов есть не только атрибуты, но и свойства. Иногда они совпадают, иногда нет.
Пример:
<input id="myinput" type="text" value="Привет">
const input = document.getElementById('myinput');
console.log(input.getAttribute('value')); // "Привет"
console.log(input.value); // "Привет"
input.value = "Пока!"; // Меняем свойство value
console.log(input.getAttribute('value')); // Всё ещё "Привет"!
- Атрибуты — то, что написано в HTML.
- Свойства — текущее состояние элемента в JS.
- После изменения через свойство, атрибут не меняется (и наоборот).
Когда использовать getAttribute/setAttribute?
- Когда нужно работать с тем, что реально написано в HTML.
- Когда работаете с кастомными или нестандартными атрибутами (data-*, aria-*).
- Когда нужно добавить или убрать атрибут (например, disabled, checked, hidden).
Когда использовать свойства?
- Когда работаете с текущим состоянием элемента: input.value, checkbox.checked, img.src и т.д.
- Когда хотите мгновенно изменить поведение или внешний вид элемента.
7. Практика: динамическая ссылка
Давайте добавим на страницу ссылку и кнопку, чтобы менять адрес ссылки по клику.
<a id="my-link" href="https://yandex.ru" target="_blank">Перейти</a>
<button id="btn-google">Сделать ссылку на Google</button>
const link = document.getElementById('my-link');
const btnGoogle = document.getElementById('btn-google');
btnGoogle.onclick = function() {
link.setAttribute('href', 'https://google.com');
link.textContent = 'Теперь это Google!';
};
Теперь при нажатии на кнопку ссылка ведёт на Google, и текст меняется. Просто магия!
8. Типичные ошибки при работе с атрибутами
Ошибка №1: Путаница между свойствами и атрибутами.
Очень часто новички пытаются получить или изменить, например, checked через getAttribute, а потом удивляются, что состояние чекбокса не меняется. Помните: для текущего состояния используйте свойства (checkbox.checked), а для исходного значения или кастомных атрибутов — getAttribute/setAttribute.
Ошибка №2: Необязательные значения булевых атрибутов.
Некоторые пишут setAttribute('disabled', 'false') и думают, что кнопка станет активной. Но для булевых атрибутов важно только наличие! Чтобы сделать кнопку активной, нужно удалить атрибут: removeAttribute('disabled').
Ошибка №3: Ошибки в названии атрибута.
HTML не различает регистр, а JS — различает! Пишите строго так, как называется атрибут: 'src', 'href', 'data-user-id'. Ошибка в одной букве — и вы получите null или ничего не изменится.
Ошибка №4: Попытка изменить стандартные свойства только через атрибуты.
Если вы меняете input.value через setAttribute, это не всегда работает как ожидается. Для изменения значения поля используйте свойство: input.value = 'Новое значение'.
Ошибка №5: Удаление несуществующего атрибута.
Если вы вызвали removeAttribute для несуществующего атрибута — ничего страшного не произойдет, но иногда это может сбить с толку при отладке.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ