Добавление класса к элементу DOM в JavaScript: гайд
Быстрый ответ
Для добавления класса к элементу DOM применяется метод .classList.add()
. Вот пример кода:
document.getElementById('id').classList.add('newClass');
В этом выражении 'id'
означает идентификатор целевого элемента, а 'newClass'
– название добавляемого класса. Свойство .classList
идеально подходит для работы с классами, так как не перезаписывает существующие.
Алгоритм работы с классами
Манипуляции с классами элементов DOM становятся простыми, если известны применимые методы.
Возможности .classList
.classList
предоставляет удобные способы управления классами:
.add('className')
: Добавляет новый класс..remove('className')
: Убирает указанный класс..toggle('className')
: Переключает наличие класса, добавляя его или удаляя..contains('className')
: Проверяет, есть ли у элемента указанный класс.
Изменение текущих классов
Присваивание через свойство className
заменяет все текущие классы на новый:
element.className = 'newClass'; // Все старые классы удаляются
Встраивание в DOM
Добавление нового элемента в DOM выполняется через appendChild
:
let parentElement = document.getElementById('parentId');
parentElement.appendChild(newElement);
Не забывайте добавлять контент в элемент:
newElement.innerHTML = "Здесь могло быть ваше объявление";
Применение функций для повторного использования кода
Создание функции для добавления классов увеличивает возможности повторного использования кода:
function addClass(elementId, className) {
let element = document.getElementById(elementId);
element.classList.add(className);
}
Визуализация
Можно представить процесс добавления класса следующим образом:
// До: Div без класса
Div: 🌑
// После добавления класса 'moon' методом classList.add
document.querySelector('.div').classList.add('moon');
// После: Div стилизован классом 'moon'
Div: 🌕 (класс 'moon' добавлен!)
Так как каждый новый класс меняет внешнее оформление или поведение DOM-элемента, можно сравнить его с игроком, который меняет футболки.
Сохранение всех классов
При использовании свойства className
важно быть осторожным, чтобы не перезаписать уже существующие классы.
Сравнение атрибута class
и classList
Прямое присваивание классов через атрибут class
подразумевает некоторые риски, в отличие от использования classList
, которое обеспечивает гибкость и надёжность при работе с классами.
Поиск элементов
Для выбора элементов используйте document.querySelector()
или document.getElementById()
. Эти методы помогут вам найти требуемые узлы в DOM.
Полезные материалы
- Element: classList property – Web APIs | MDN — обзор свойства classList в JavaScript.
- How To Add a Class Name — подробное руководство по внедрению классов в DOM.
- Modifying the document — введение в искусство манипуляций с DOM, включая работу с классами.
- Tutorial | DigitalOcean — управление CSS-классами с применением JavaScript.
- javascript – How to add a class to a given element? – Stack Overflow — обсуждение на Stack Overflow методов работы с классами.
- JavaScript DOM Elements — управление DOM-элементами и многое другое.
- .addClass() | jQuery API Documentation — добавление классов с использованием jQuery.