Element.closest()
구문
closest(selectors)
매개변수
반환 값
selectors에 일치하는 가장 가까운 조상 Element 또는 자기 자신, 일치하는 요소가 없으면 null.
예외
SyntaxErrorDOMException(en-US)-
selectors가 유효한 CSS 선택자가 아니면 발생합니다.
예제
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');
// ID가 "div-02"인 가장 가까운 조상
console.log(el.closest('#div-02')); // <div id="div-02">
// div 안에 놓인 div인 가장 가까운 조상
console.log(el.closest('div div')); // <div id="div-03">
// div면서 article을 부모로 둔 가장 가까운 조상
console.log(el.closest("article > div")); // <div id="div-01">
// div가 아닌 가장 가까운 조상
console.log(el.closest(":not(div)")); // <article>
폴리필
element.closest()는 지원하지 않지만, element.matches()(또는 공급자 접두사를 포함한 동일 메서드, 즉 IE9+)는 지원하는 브라우저를 위한 폴리필입니다.
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
정말 IE 8을 지원해야 하는 경우, 아래의 폴리필을 사용하면 비록 느리게나마 같은 작업을 할 수 있습니다. 하지만 IE 8에서는 CSS 2.1 선택자만 사용할 수 있고, 이 폴리필을 실제 운영하는 웹 사이트에 적용하면 심각한 지연 시간의 원인이 될 수 있습니다.
if (window.Element && !Element.prototype.closest) {
Element.prototype.closest = function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i,
el = this;
do {
i = matches.length;
while (--i >= 0 && matches.item(i) !== el) {};
} while ((i < 0) && (el = el.parentElement));
return el;
};
}
명세
| Specification |
|---|
| DOM Standard # ref-for-dom-element-closest① |
브라우저 호환성
BCD tables only load in the browser
호환성 참고사항
- Edge 15-18에서는 요소가 컨텍스트 객체(일반 DOM의 경우,
Document)와 연결되지 않은 경우null을 반환합니다. 따라서document.createElement(tagName).closest(tagName)의 결과는 항상null입니다.