matches() — перевірка елемента на CSS-селектор у JS

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

Метод matches() елемента в JavaScript використовується для перевірки, чи відповідає цей елемент заданому селектору CSS. Цей метод є зручним інструментом для вибірки елементів на сторінці за певними критеріями, що визначаються селектором CSS. Він часто застосовується в обробниках подій, умовних операторах та циклах для фільтрації та маніпулювання елементами DOM.

Синтаксис використання методу matches() є наступним: element.matches(selectors), де element - це посилання на елемент DOM, а selectors - рядок, що містить один або кілька селекторів CSS, розділених комами. Метод повертає true, якщо елемент відповідає заданому селектору, та false в іншому випадку.

Наприклад, припустимо, що ми маємо наступний HTML-код:

<div id="container">
  <p class="text">Параграф 1</p>
  <p class="text highlight">Параграф 2</p>
  <p>Параграф 3</p>
</div>

Ми можемо використати метод matches() для вибірки певних елементів:

const container = document.getElementById('container');
const paragraphs = container.querySelectorAll('p');

paragraphs.forEach(p => {
  if (p.matches('.text')) {
    console.log('Елемент відповідає селектору .text');
  }
  if (p.matches('.text.highlight')) {
    console.log('Елемент відповідає селектору .text.highlight');
  }
});

У цьому прикладі ми спочатку отримуємо посилання на контейнер та всі параграфи всередині нього. Потім ми перебираємо кожен параграф та перевіряємо, чи відповідає він селектору .text або .text.highlight за допомогою методу matches(). Якщо відповідність знайдена, ми виводимо повідомлення в консоль.

Метод matches() також може бути корисним у випадках, коли необхідно виконати певні дії над елементами, що відповідають певному критерію. Наприклад, ми можемо змінити стиль елементів, що відповідають заданому селектору:

const elements = document.querySelectorAll('*');

elements.forEach(element => {
  if (element.matches('a[href^="http"]')) {
    element.style.color = 'green';
  }
});

У цьому прикладі ми отримуємо всі елементи на сторінці за допомогою універсального селектора *. Потім ми перебираємо кожен елемент та перевіряємо, чи відповідає він селектору a[href^="http"], тобто чи є він посиланням, що починається з http. Якщо відповідність знайдена, ми змінюємо колір тексту елемента на зелений.

Метод matches() є потужним інструментом для роботи з DOM та вибірки елементів за певними критеріями. Він забезпечує гнучкість та ефективність у маніпулюванні елементами на сторінці та може бути використаний у різноманітних сценаріях, включаючи обробку подій, валідацію форм, стилізацію елементів та багато іншого.

правити

Порада

Коли ви працюєте з великою кількістю елементів, використовуйте метод matches() у поєднанні з методами querySelectorAll() та циклами для фільтрації та маніпулювання елементами, що відповідають певним критеріям. Це підвищить ефективність та зрозумілість вашого коду.

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

Порада

Для досвідчених програмістів: метод matches() можна використовувати для створення гнучких та потужних функцій, що працюють з DOM. Наприклад, ви можете створити функцію, яка приймає селектор CSS та виконує певні дії над усіма елементами, що відповідають цьому селектору.

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

Порада

Пам'ятайте, що метод matches() може бути корисним не лише для перевірки відповідності елемента певному селектору CSS, але й для валідації даних форм, стилізації елементів на основі їх атрибутів та багато іншого. Не обмежуйте себе лише типовими випадками використання.

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

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

Синтаксис

matches(selectors)

Параметри

selectors

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

автор: Bond

правити

Повернення

boolean

Повертає значення true, якщо елемент відповідає заданим селекторам. У випадку, якщо елемент не відповідає заданим селекторам, повертається значення false.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	33	34	8	21	15	9*

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

Переглядач
	4.4.3	33	34	8

Приклади

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

const navItems = document.querySelectorAll('nav ul li');

navItems.forEach(item => {
  item.addEventListener('click', () => {
    // Видалити клас active з усіх елементів списку
    navItems.forEach(item => item.classList.remove('active'));
    
    // Додати клас active до обраного елемента
    if (item.matches('li:not(.active)')) {
      item.classList.add('active');
    }
  });
});

function toggleVisibility(selector) {
  const elements = document.querySelectorAll('*'); // Отримати всі елементи на сторінці

  elements.forEach(element => {
    if (element.matches(selector)) { // Перевірити, чи відповідає елемент селектору
      const isVisible = window.getComputedStyle(element).display !== 'none';
      element.style.display = isVisible ? 'none' : 'block'; // Змінити видимість елемента
    }
  });
}

// Приклад використання
toggleVisibility('p.hidden'); // Приховати/показати всі параграфи з класом hidden
toggleVisibility('a[href^="https://"]'); // Приховати/показати всі посилання, що починаються з https://

<header>
  <h2 class="title">Element: matches() method</h2>
  <p class="description">Перевіряє, чи відповідає елемент заданому селектору CSS.</p>
</header>
<main>
  <div class="result">
    <div class="filters">
      <label>
        <input type="checkbox" id="showImages"> Показати зображення
      </label>
      <label>
        <input type="checkbox" id="showLinks"> Показати посилання
      </label>
    </div>
    <div class="content">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення">
      <p>Це параграф тексту.</p>
      <a href="#">Це посилання</a>
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення">
      <p>Ще один параграф тексту.</p>
      <a href="#">Інше посилання</a>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.filters {
  margin-bottom: 10px;
}

.content img {
  display: none;
}

.content a {
  display: none;
}

const showImagesCheckbox = document.getElementById('showImages');
const showLinksCheckbox = document.getElementById('showLinks');
const contentElements = document.querySelectorAll('.content > *');

showImagesCheckbox.addEventListener('change', toggleVisibility);
showLinksCheckbox.addEventListener('change', toggleVisibility);

function toggleVisibility() {
  contentElements.forEach(element => {
    if (element.matches('img')) {
      element.style.display = showImagesCheckbox.checked ? 'block' : 'none';
    } else if (element.matches('a')) {
      element.style.display = showLinksCheckbox.checked ? 'inline' : 'none';
    }
  });
}
//# sourceURL=pen.js