Element: Methode closest()
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 Dokumentwurzel), bis sie einen Knoten findet, der dem angegebenen CSS-Selektor entspricht.
Syntax
js
closest(selectors)
Parameter
selectors-
Ein String gültiger CSS-Selektoren, um das
Elementund seine Vorfahren daraufhin zu überprüfen.
Rückgabewert
Das nächste übergeordnete Element oder das Element selbst, das den selectors entspricht. Wenn kein solches Element vorhanden ist, null.
Ausnahmen
SyntaxErrorDOMException-
Wirft eine Ausnahme, 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
Loading…
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, z. B. demDocument-Objekt im Fall des normalen DOM.
Siehe auch
- CSS-Selektoren-Modul
- Andere Methoden der
Element-Schnittstelle, die Selektoren benötigen:Element.querySelector(),Element.querySelectorAll()undElement.matches().