Изменение атрибутов и классов
Используйте setAttribute и API classList.
«Изменение атрибутов и классов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Атрибуты и классы
Элементы содержат атрибуты (например, href или data-id) и классы CSS. JavaScript предоставляет точные API для чтения и изменения и тех, и других.
getAttribute
getAttribute считывает значение атрибута как строку или возвращает null, если атрибут отсутствует.
const link = document.querySelector("a");
console.log(link.getAttribute("href"));setAttribute
setAttribute создаёт атрибут или обновляет его. Значения всегда являются строками.
link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");removeAttribute и hasAttribute
Используйте removeAttribute, чтобы удалить атрибут, а hasAttribute — чтобы проверить его наличие.
if (link.hasAttribute("target")) {
link.removeAttribute("target");
}Свойства и атрибуты
Многие атрибуты также существуют как свойства элемента (например, element.id или input.value). Свойства отражают текущее состояние, а атрибуты часто содержат исходное значение из HTML.
input.value; // current value
input.getAttribute("value"); // original defaultНабор данных для data-*
Пользовательские атрибуты data-* доступны через объект dataset с использованием ключей в стиле camelCase.
const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open"; // sets data-stateОбзор classList
classList — это динамический объект для управления классами без ручного редактирования строки className.
const box = document.querySelector(".box");
console.log(box.classList);classList.add и remove
add и remove принимают одно или несколько имён классов и корректно игнорируют дубликаты или отсутствующие классы.
box.classList.add("active", "highlight");
box.classList.remove("hidden");classList.toggle
toggle добавляет класс, если его нет, и удаляет его, если он есть, возвращая логическое значение нового состояния. Второй аргумент принудительно включает или выключает класс.
box.classList.toggle("open");
box.classList.toggle("open", true); // force addclassList.contains и replace
contains проверяет наличие класса, а replace заменяет один класс другим на том же месте.
if (box.classList.contains("active")) {
box.classList.replace("active", "inactive");
}Почему classList лучше className
Редактирование className как строки может случайно удалить другие классы. classList безопасно изменяет только целевые классы.
box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the restБыстрая проверка
Выберите поведение переключения.
Итоги
Читайте и изменяйте атрибуты с помощью getAttribute/setAttribute/removeAttribute/hasAttribute, а к data-* обращайтесь через dataset. Управляйте классами с помощью методов classList: add, remove, toggle, contains и replace. Они безопаснее, чем перезапись className.
Часто задаваемые вопросы
Урок «Изменение атрибутов и классов» бесплатный?
Да — полный текст урока «Изменение атрибутов и классов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Изменение атрибутов и классов»?
Используйте setAttribute и API classList. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Изменение атрибутов и классов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Изменение текста и содержимого HTML
- Создание и вставка элементов
- Изменение атрибутов и классов
- Удаление и замена узлов