JS метод Element.matches()

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

Метод 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(selectors)

Параметри

*selectors

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

Return

boolean

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

Переглядачі

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

Приклади

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

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