Добавление класса к элементу 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.

Полезные материалы

1. Element: classList property – Web APIs | MDN — обзор свойства classList в JavaScript.
2. How To Add a Class Name — подробное руководство по внедрению классов в DOM.
3. Modifying the document — введение в искусство манипуляций с DOM, включая работу с классами.
4. Tutorial | DigitalOcean — управление CSS-классами с применением JavaScript.
5. javascript – How to add a class to a given element? – Stack Overflow — обсуждение на Stack Overflow методов работы с классами.
6. JavaScript DOM Elements — управление DOM-элементами и многое другое.
7. .addClass() | jQuery API Documentation — добавление классов с использованием jQuery.