JavaScript contains() — чи міститься вузол усередині

Метод contains() перевіряє, чи є вузол нащадком цього елемента, і повертає true або false.

правити

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

Головне застосування — клік поза елементом: закрити випадне меню, коли клікнули будь-де, крім нього самого. Ловимо клік на document і питаємо, чи не всередині меню він стався.

Одна тонкість, яка часом рятує, а часом дивує: елемент містить сам себе — menu.contains(menu) дає true.

Для перевірки «чи збігається елемент або його предок із селектором» зручніший closest() — він шукає вгору по дереву й одразу віддає знайдений елемент.

правити

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

Переглядачі

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

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

Переглядач
contains	1+	1+	1+	7+	12+	9+

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

Переглядач
contains	yes	yes	yes	yes

Приклади

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

<div id="menu">
    <button>Меню</button>
    <ul><li>Пункт</li></ul>
</div>

const menu = document.getElementById('menu');

document.addEventListener('click', event => {
    // клік стався поза меню — закриваємо
    if (!menu.contains(event.target)) {
        menu.classList.remove('open');
    }
});

// елемент містить сам себе
console.log(menu.contains(menu)); // true