JS метод DOMTokenList.contains()

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

Метод contains() об'єкта DOMTokenList використовується для перевірки, чи наявний певний токен (клас) у списку класів елемента DOM. Він повертає логічне значення true, якщо токен присутній, і false в іншому випадку. Цей метод є корисним для перевірки наявності класу перед маніпуляціями з ним, що дозволяє уникнути непотрібних операцій та покращує продуктивність.

Синтаксис методу contains() наступний:

elementNode.classList.contains('назва-класу');

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

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

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

const myDiv = document.getElementById('myDiv');
const hasActiveClass = myDiv.classList.contains('active');
console.log(hasActiveClass); // true

У цьому прикладі ми спочатку отримуємо посилання на елемент div за його id. Потім ми викликаємо метод contains() на об'єкті classList цього елемента, передаючи рядок 'active'. Оскільки клас 'active' присутній у списку класів елемента, метод contains() поверне true, і це значення буде присвоєно змінній hasActiveClass.

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

if (!myDiv.classList.contains('highlighted')) {
  myDiv.classList.add('highlighted');
}

Або ви можете видалити клас лише в тому випадку, якщо він присутній:

if (myDiv.classList.contains('bordered')) {
  myDiv.classList.remove('bordered');
}

Крім того, метод contains() може бути використаний у складніших сценаріях, таких як фільтрація або маніпуляції з елементами на основі їх класів. Наприклад, ви можете знайти всі елементи з певним класом і виконати над ними певні операції:

const elements = document.querySelectorAll('.item');
elements.forEach(element => {
  if (element.classList.contains('active')) {
    // Виконати дії з активними елементами
  }
});

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

правити

Порада

Комбінуйте метод contains() з іншими методами classList, такими як add(), remove() та toggle(), для створення більш гнучких і ефективних рішень для маніпуляції класами елементів. Це дозволить вам писати більш лаконічний і зрозумілий код.

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

Порада

Використовуйте метод contains() для фільтрації або обробки елементів на основі їх класів. Наприклад, ви можете знайти всі елементи з певним класом і виконати над ними певні операції: const activeElements = document.querySelectorAll('.item').filter(item => item.classList.contains('active'));.

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

Порада

Для досвідчених програмістів: розглядайте можливість використання методу contains() у поєднанні з умовними операторами або циклами для динамічної перевірки наявності класів на основі певних умов або даних. Це може бути корисним у складних сценаріях, де потрібно виконувати різні дії залежно від стану елементів. Наприклад: items.forEach(item => { if (item.classList.contains('highlighted')) { /* Виконати дії з виділеними елементами */ } });.

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

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

Синтаксис

contains(token)

Параметри

token

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

автор: Bond

правити

Повернення

boolean

Повертає логічне значення: true, якщо викликаючий список містить токен, інакше - false.

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div id="myDiv" class="initial">Це елемент div</div>

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

if (!myDiv.classList.contains('active')) {
  myDiv.classList.add('active');
}
</script>

<ul id="taskList">
  <li class="completed">Завдання 1</li>
  <li>Завдання 2</li>
  <li class="completed">Завдання 3</li>
  <li>Завдання 4</li>
</ul>

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

// Фільтруємо завершені завдання
const completedTasks = Array.from(listItems).filter(item => {
  return item.classList.contains('completed');
});

// Виконуємо дії з завершеними завданнями
completedTasks.forEach(task => {
  // Наприклад, додаємо спеціальний клас або виконуємо певні операції
  task.classList.add('checked');
});
</script>