Как задать или удалить класс конкретному дочернему элементу?

В JavaScript существует несколько способов задать или удалить класс у конкретного дочернего элемента. Рассмотрим наиболее популярные и простые варианты.

1. Использование свойства classList:

// Для установки класса
const element = document.querySelector('.parent-element .child-element');
element.classList.add('class-name');

// Для удаления класса
element.classList.remove('class-name');

2. Использование свойства className:

// Для установки класса
const element = document.querySelector('.parent-element .child-element');
element.className += ' class-name';

// Для удаления класса
element.className = element.className.replace('class-name', '').trim();

3. Использование методов setAttribute и removeAttribute:

// Для установки класса
const element = document.querySelector('.parent-element .child-element');
element.setAttribute('class', 'class-name');

// Для удаления класса
element.removeAttribute('class');

Обратите внимание, что при использовании 1 и 2 способов классы записываются и удаляются как строка, поэтому возможна потеря других классов у элемента. Поэтому для чистого задания или удаления класса лучше использовать свойство classList или методы setAttribute и removeAttribute. Кроме того, свойство classList также предоставляет другие удобные методы, такие как toggle, contains и т.д., которые могут быть полезны в различных ситуациях.

Надеюсь, это поможет вам установить или удалить класс у конкретного дочернего элемента в JavaScript!