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'); }.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

tokenN

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

автор: Bond

правити

Повернення

none

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	8	3.6	5.1	≤12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	3	18	4	5

Приклади

+ запропонувати свій приклад у пісочниці

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

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