Element: closest() method
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.
Thuộc tính closest() của giao diện Element traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
Cú pháp
js
closest(selectors)
Tham số
selectors-
Một chuỗi of valid CSS selectors to match the
Elementand its ancestors against.
Giá trị trả về
The closest ancestor Element or itself, which matches the selectors. If there are no such element, null.
Ngoại lệ
SyntaxErrorDOMException-
Thrown if the
selectorsis not a valid CSS selector.
Ví dụ
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>
Đặc tả kỹ thuật
| Specification |
|---|
| DOM # ref-for-dom-element-closest① |
Trình duyệt hỗ trợ
Compatibility notes
- In Edge 15-18
document.createElement(tagName).closest(tagName)will returnnullif the element is not first connected (directly or indirectly) to the context object, for example theDocumentobject in the case of the normal DOM.
Xem thêm
- CSS selectors module
- Other
Elementmethods that take selectors:Element.querySelector(),Element.querySelectorAll(), andElement.matches().