css.in.ua
Підтримати

JS метод DOMTokenList.add()

Загальний опис

Метод add() об'єкта DOMTokenList використовується для додавання одного або кількох токенів (значень) до списку класів елемента DOM. Він є корисним для маніпуляції класами елементів, що дозволяє динамічно змінювати стилі та поведінку елементів на веб-сторінці.

Синтаксис методу add() виглядає наступним чином:

elementNode.classList.add('клас1', 'клас2', ...);

Він приймає один або кілька аргументів у вигляді рядків, які представляють імена класів, що потрібно додати до елемента. Метод add() є частиною об'єкта classList, який є властивістю елементів DOM і надає зручний інтерфейс для роботи зі списком класів елемента.

Розглянемо приклад використання методу add():

<div id="myDiv" class="initial"></div>

const myDiv = document.getElementById('myDiv');
myDiv.classList.add('new-class', 'another-class');

У цьому прикладі ми спочатку отримуємо посилання на елемент div за його id. Потім ми викликаємо метод add() на об'єкті classList цього елемента, передаючи два нових класи 'new-class' та 'another-class'. Після виконання цього коду, елемент div матиме три класи: 'initial', 'new-class' та 'another-class'.

Метод add() є особливо корисним у динамічних веб-додатках, де стилі та поведінка елементів можуть змінюватися залежно від певних умов або дій користувача. Наприклад, ви можете додавати клас 'active' до елемента меню, коли користувач наводить на нього курсор, або додавати клас 'open' до випадаючого меню, коли користувач натискає на кнопку.

Крім того, метод add() може бути використаний у поєднанні з іншими методами об'єкта classList, такими як remove() та toggle(), для більш гнучкого керування класами елементів.

Ось більш складний приклад, який демонструє використання методу add() у контексті обробника події:

<button id="toggleBtn">Toggle Class</button>
<div id="myDiv" class="initial"></div>

const myDiv = document.getElementById('myDiv');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
  myDiv.classList.toggle('active');
  if (myDiv.classList.contains('active')) {
    myDiv.classList.add('highlighted', 'bordered');
  } else {
    myDiv.classList.remove('highlighted', 'bordered');
  }
});

У цьому прикладі ми маємо кнопку та елемент div. При натисканні на кнопку ми викликаємо метод toggle() для класу 'active' на елементі div. Якщо клас 'active' присутній, ми додаємо два додаткові класи 'highlighted' та 'bordered' за допомогою методу add(). Якщо клас 'active' відсутній, ми видаляємо ці два класи за допомогою методу remove().

Порада:

Перевіряйте наявність класу перед додаванням, щоб уникнути дублювання. Метод add() не додасть клас, якщо він вже присутній в списку класів елемента. Однак, для кращої продуктивності, ви можете перевірити наявність класу за допомогою методу contains() перед додаванням. Наприклад: if (!element.classList.contains('class')) { element.classList.add('class'); }.
Порада:

Використовуйте метод add() у поєднанні з іншими методами classList, такими як remove() та toggle(), для гнучкого керування класами елементів. Наприклад, ви можете додавати клас 'active' під час наведення курсору на елемент, а потім видаляти його при відведенні курсору: element.addEventListener('mouseover', () => { element.classList.add('active'); }); element.addEventListener('mouseout', () => { element.classList.remove('active'); }).
Порада:

Для досвідчених програмістів: розглядайте можливість використання метода add() у поєднанні з умовними операторами або циклами для динамічного додавання класів на основі певних умов або даних. Наприклад, ви можете додавати клас 'even' або 'odd' до елементів списку залежно від їх індексу: items.forEach((item, index) => { item.classList.add(index % 2 === 0 ? 'even' : 'odd'); }).

Синтаксис

add(token1)
add(token1, token2)
add(token1, token2, /* …, */ tokenN)

Параметри

*tokenN

Рядок, який представляє токен (або токени), що потрібно додати до DOMTokenList.

Return

none

Переглядачі

Переглядач

8

3.6

5.1

12.1

12
Переглядач

3

18

4

5
Переглядач

-

-

Приклади


У цьому прикладі ми маємо елемент div з класом initial і дві кнопки: "Додати клас" та "Видалити клас". При натисканні на кнопку "Додати клас" ми використовуємо метод add() для додавання класів highlighted та bordered до елемента div. Це призводить до зміни фону елемента на жовтий колір та додавання червоної рамки навколо нього.

При натисканні на кнопку "Видалити клас" ми видаляємо ці два класи за допомогою методу remove() об'єкта classList, повертаючи елемент div до початкового стану.

Користувач може взаємодіяти з прикладом, натискаючи на кнопки та спостерігаючи зміни в стилях елемента div. Це демонструє, як метод add() може використовуватися для динамічного додавання класів до елементів, що впливає на їх зовнішній вигляд та поведінку.

У цьому прикладі ми додаємо клас active до елемента div при натисканні на кнопку. Це може бути корисним для візуального виділення активного елемента або зміни його поведінки за допомогою CSS.

<button id="toggleButton">Toggle Active</button>
<div id="myDiv">Це елемент div</div>

<script>
const toggleButton = document.getElementById('toggleButton');
const myDiv = document.getElementById('myDiv');

toggleButton.addEventListener('click', () => {
  myDiv.classList.add('active');
});
</script>

У цьому прикладі ми динамічно додаємо класи even або odd до елементів списку li на основі їх індексу. Це може бути корисним для стилізації рядків таблиці або списку з чергуванням кольорів для кращої читабельності.

<ul id="myList">
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
  <li>Елемент 4</li>
</ul>

<script>
const myList = document.getElementById('myList');
const listItems = myList.getElementsByTagName('li');

// Ітеруємося через кожен елемент списку
Array.from(listItems).forEach((item, index) => {
  // Додаємо клас 'even' або 'odd' на основі індексу
  item.classList.add(index % 2 === 0 ? 'even' : 'odd');
});
</script>

Спільнота

Зв'язок