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(token1)
add(token1, token2)
add(token1, token2, /* …, */ tokenN)

Параметри

*tokenN

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

Return

none

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<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>

<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>