matches, closest и поиск вверх по дереву

Тот же самый селектор, которым вы ищете элементы, можно приложить к уже готовому элементу и спросить: подходит? Это и делает elem.matches(selector) — возвращает true или false и при этом ничего не ищет в дереве.

Проверяется селектор целиком, вместе с комбинаторами: #menu > li.item истинно, только если элемент действительно прямой ребёнок #menu. А если селектор синтаксически неверный, matches бросит исключение, а не вернёт false — опечатка не притворится «не подошло».

const items = document.querySelectorAll("#menu li");

console.log(items[0].matches(".active"));
console.log(items[1].matches(".active"));
console.log(items[1].matches("#menu > li.item"));
console.log(items[0].matches("li:first-child"));

const links = document.querySelectorAll("#box a");
const external = [...links].filter((link) => link.matches("[href^=https]"));

console.log(external.length);
console.log(external[0].textContent);

closest — это matches, поставленный в цикл. Браузер примеряет селектор к самому элементу, потом к родителю, деду и так далее до корня документа. Первое совпадение возвращается, до верха без совпадений — null.

Возврат null — обычное дело, а не сбой, поэтому хвататься за результат без проверки нельзя: elem.closest(".card").id на элементе вне карточки уронит код. У открепленного от документа элемента подъём идёт по тем же правилам, только до вершины его собственного поддерева: подойдёт она селектору — вернётся она, не подойдёт — null.

const button = document.querySelector(".buy");

console.log(button.closest(".card").id);
console.log(button.closest(".buy") === button);
console.log(button.closest(".body").className);
console.log(button.closest(".missing"));

const icon = document.querySelectorAll(".del")[1];
const row = icon.closest("[data-id]");

console.log(row.tagName);
console.log(row.dataset.id);

closest — это не «родитель». Он сначала примеряет селектор к самому элементу, и в делегировании это ровно то, что нужно: клик по кнопке даёт кнопку, а не то, что над ней.

function closestManual(node, selector) {
  while (node) {
    if (node.matches(selector)) return node;
    node = node.parentElement;
  }
  return null;
}

const link = document.getElementById("link");

console.log(closestManual(link, ".wrap").className);
console.log(closestManual(link, "table"));

contains смотрит в противоположную сторону — вниз. parent.contains(node) отвечает, лежит ли узел где-то в поддереве, на любой глубине. И да, узел содержит сам себя: panel.contains(panel) — это true.

Селектор тут не нужен вовсе, аргумент — любой узел, включая текстовый. Это чистая проверка родства, отсюда и главная идиома: document.body.contains(el) — элемент ещё на странице или уже удалён и живёт только в вашей переменной.

const panel = document.getElementById("panel");
const bold = document.getElementById("bold");

console.log(panel.contains(bold));
console.log(panel.contains(panel));
console.log(bold.contains(panel));
console.log(document.body.contains(document.createElement("div")));

Сто строк списка — сто обработчиков? Нет. События всплывают, поэтому хватает одного слушателя на контейнере: он поймает клики по всем потомкам, включая те, что появятся через час после подписки. Это и есть делегирование — приём, которому отведена своя статья; здесь он нужен как главное место работы closest.

Но у делегата есть неприятная деталь: event.target — самый глубокий элемент под курсором. Клик по кнопке с иконкой и подписью внутри даст span, а не кнопку. Поэтому первая строка почти любого делегата — подъём от точки клика к смысловому элементу через closest, а вторая — выход, если подниматься было не к чему.

const bar = document.getElementById("bar");

bar.addEventListener("click", (event) => {
  console.log(event.target.className);
  console.log(event.target.closest(".tool").className);
});

bar.querySelector(".icon").click();

const list = document.getElementById("todo");

list.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-act]");
  if (!button) return;
  console.log(button.dataset.act + ": " + button.closest("li").dataset.name);
});

list.querySelectorAll("button")[1].click();
list.click();

closest ничего не знает о вашем контейнере: он спокойно пройдёт сквозь него и найдёт совпадение выше по дереву. В делегировании это уже баг — обработчик среагирует на то, что к нему не относится.

const inner = document.getElementById("inner");
const tag = document.querySelector(".tag");

const found = tag.closest(".card");

console.log(found.className);
console.log(inner.contains(found));

Страховка — container.contains(found): нашли что-то вне своего поддерева, значит, событие не наше. И ещё мелочь на будущее: event.target не обязан быть элементом (например, у слушателя на document), а closest живёт только на элементах, поэтому в общем коде уместна проверка event.target instanceof Element.