Element: closest() Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.
Die closest() Methode der Element Schnittstelle traversiert das Element und seine Eltern (in Richtung des Wurzelelements des Dokuments), bis sie einen Knoten findet, der mit dem angegebenen CSS-Selektor übereinstimmt.
Syntax
js
closest(selectors)
Parameter
selectors-
Ein String mit gültigen CSS-Selektoren, um das
Elementund seine Vorfahren zu überprüfen.
Rückgabewert
Das nächste übergeordnete Element oder es selbst, das mit den selectors übereinstimmt. Wenn kein solches Element vorhanden ist, wird null zurückgegeben.
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
| Spezifikation |
|---|
| DOM # ref-for-dom-element-closest① |
Browser-Kompatibilität
Kompatibilitätshinweise
- 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 DOMs.
Siehe auch
- CSS-Selektoren Modul
- Andere Methoden der
ElementSchnittstelle, die Selektoren verwenden:Element.querySelector(),Element.querySelectorAll(), undElement.matches().