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 Standard
# ref-for-dom-element-closest①

Browser-Kompatibilität

BCD tables only load in the browser

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