Element: closest() Methode

Die closest() Methode des Element-Interfaces durchläuft das Element und seine Eltern (auf das Dokumentwurzel zugehend), bis ein Knoten gefunden wird, der mit dem angegebenen CSS-Selektor übereinstimmt.

Syntax

js
closest(selectors)

Parameter

selectors

Ein String eines gültigen CSS-Selektors, um das Element und seine Vorfahren zu prüfen.

Rückgabewert

Das nächste übergeordnete Element oder es selbst, das dem selectors entspricht. Wenn kein solches Element vorhanden ist, wird null zurückgegeben.

Ausnahmen

SyntaxError DOMException

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

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ätsnotizen

  • 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 Falle des normalen DOM.

Siehe auch