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 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
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
<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
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 demDocument
-Objekt im Falle des normalen DOM.
Siehe auch
- CSS-Selektoren Modul
- Andere
Element
-Methoden, die Selektoren verwenden:Element.querySelector()
,Element.querySelectorAll()
undElement.matches()
.