Element.closest()
closest()
함수는
주어진 CSS 선택자와 일치하는 가장 가까운(closest) 상위 조상 요소를 찾아서 반환합니다.
이때, 해당 요소 자신도 검사 대상에 포함됩니다.
일치하는 요소가 없으면 null
을 반환합니다.
closest()
함수의 반대 개념은 가장 가까운 하위 자식 요소를 찾는 것입니다.
이에 해당하는 함수는 DOM 트리를 아래로 탐색하는 것이며, 일반적으로는 querySelector()
함수를 사용합니다.
구문
매개변수
selectors |
문자열 형식의 유효한 CSS 선택자입니다. |
---|
반환 값
- 주어진 CSS 선택자와 일치하는 가장 가까운(closest) 상위 조상 요소를 찾아서 객체로 반환합니다.
이때, 해당 요소 자신도 검사 대상에 포함됩니다. - 일치하는 요소가 없으면
null
을 반환합니다.
주의할 점
closest()
함수는 일치하는 요소가 없는 경우 null
을 반환합니다. 따라서 반환된 결과를 사용하기 전에 항상 null
여부를 체크해야 합니다.
예를 들어, 다음과 같은 HTML 구조가 있다고 가정해보겠습니다.
위의 예제에서는 closestListItem
이 null
이 아닌지 확인하여 가장 가까운 <li>
요소가 있는지를 확인합니다. 만약 null
이 아니라면, 콘솔에 해당 요소를 출력하고, null
이라면 "일치하는 요소가 없습니다."라는 메시지를 출력합니다. 이렇게 함으로써 closest()
함수의 반환값이 유효한지를 확인할 수 있습니다.
브라우저 호환성
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
closest()
|
41 | 15 | 35 | 6 |
명세서
명세서 사양 | |
---|---|
closest()
|
DOM Standard #ref-for-dom-element-closest① |