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 April 2017.
Die closest() Methode der Element Schnittstelle durchläuft das Element und seine Eltern (in Richtung des Dokumentenwurzel), bis sie einen Knoten findet, der dem angegebenen CSS-Selektor entspricht.
Syntax
js
closest(selectors)
Parameter
selectors-
Ein String mit gültigen CSS-Selektoren, um das
Elementund seine Vorfahren abzugleichen.
Rückgabewert
Das nächste übergeordnete Element oder das Element selbst, das den selectors entspricht. Wenn es ein solches Element nicht gibt, null.
Ausnahmen
SyntaxErrorDOMException-
Wird ausgelöst, wenn die
selectorskein 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
Kompatibilitätsnotizen
- In Edge 15-18 wird
document.createElement(tagName).closest(tagName)nullzurückgeben, wenn das Element nicht zuerst (direkt oder indirekt) mit dem Kontextobjekt verbunden ist, zum Beispiel demDocumentObjekt im Fall des normalen DOM.
Siehe auch
- CSS-Selektoren Modul
- Andere
ElementMethoden, die Selektoren verwenden:Element.querySelector(),Element.querySelectorAll(), undElement.matches().