Element: closest() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die closest() Methode der Element Schnittstelle durchläuft das Element und seine Eltern (in Richtung des Dokumentwurzel), bis es einen Knoten findet, der mit dem angegebenen CSS-Selektor übereinstimmt.

Syntax

js
closest(selectors)

Parameter

selectors

Ein String aus gültigen CSS-Selektoren, um das Element und seine Vorfahren zu überprüfen.

Rückgabewert

Das nächste übergeordnete Element oder es selbst, das den selectors entspricht. Wenn es kein solches Element gibt, null.

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn die selectors kein gültiger CSS-Selektor sind.

Beispiele

HTML

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

js
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>

Spezifikationen

Specification
DOM
# ref-for-dom-element-closest①

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
closest

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Kompatibilitätsnoten

  • In Edge 15-18 wird document.createElement(tagName).closest(tagName) null zurückgeben, wenn das Element nicht zuerst (direkt oder indirekt) mit dem Kontextobjekt verbunden ist, zum Beispiel dem Document Objekt im Fall des normalen DOM.

Siehe auch