Элемент: метод closest()

Базовая линия Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Метод closest() интерфейса Element проходит по элементу и его родителям (в направлении к корню документа), пока не найдёт узел, который соответствует указанному CSS-селектору.

Синтаксис

closest(selectors)

Параметры

selectors: Строка допустимых CSS-селекторов для сопоставления с Element и его предками.

Возвращаемое значение

Наиболее близкий предковый Element или сам элемент, соответствующий selectors. Если такого элемента нет, null.

Исключения

SyntaxError DOMException: Выбрасывается, если selectors не является допустимым CSS-селектором.

Примеры

HTML

<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

JavaScript

const el = document.getElementById("div-03");

// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">

// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">

// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">

// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>

Спецификации

Спецификация
DOM # ref-for-dom-element-closest①

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`closest`	41	15	35	28	6	41	35	28	9	4.0	41

Примечания к совместимости

В Edge 15-18 document.createElement(tagName).closest(tagName) вернёт null если элемент не подключён вначале (непосредственно или косвенно) к объекту контекста, например, объекту Document в случае обычного DOM.

См. также

Модуль CSS-селекторов
Другие методы Element, принимающие селекторы: Element.querySelector(), Element.querySelectorAll() и Element.matches().

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest