자바스크립트 closest() 함수 사용법 – 가장 가까운 조상 요소 찾기

`Element.closest()`

closest() 함수는
주어진 CSS 선택자와 일치하는 가장 가까운(closest) 상위 조상 요소를 찾아서 반환합니다.
이때, 해당 요소 자신도 검사 대상에 포함됩니다.
일치하는 요소가 없으면 null을 반환합니다.

JavaScript

const me = document.getElementById("me");

console.log(me.closest(".container")); // <div id="div-02" class="container">...</div>
console.log(me.closest("section > div")); // <div id="div-01" class="container">...</div>

/* 해당 요소 자신도 검사 대상에 포함됩니다. */
console.log(me.closest("div")); // <div id="me">...</div>

/* 일치하는 요소가 없으면 null을 반환합니다. */
console.log(me.closest("p")); // null

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

closest() 함수의 반대 개념은 가장 가까운 하위 자식 요소를 찾는 것입니다.
이에 해당하는 함수는 DOM 트리를 아래로 탐색하는 것이며, 일반적으로는 querySelector() 함수를 사용합니다.

구문

매개변수

closest() 함수의 매개변수
`selectors`	문자열 형식의 유효한 CSS 선택자입니다.

반환 값

주어진 CSS 선택자와 일치하는 가장 가까운(closest) 상위 조상 요소를 찾아서 객체로 반환합니다.
이때, 해당 요소 자신도 검사 대상에 포함됩니다.
일치하는 요소가 없으면 null을 반환합니다.

주의할 점

closest() 함수는 일치하는 요소가 없는 경우 null을 반환합니다. 따라서 반환된 결과를 사용하기 전에 항상 null 여부를 체크해야 합니다.

예를 들어, 다음과 같은 HTML 구조가 있다고 가정해보겠습니다.

HTML

<div class="container">
    <ul class="list">
        <li class="item">
            <span>Item 1</span>
        </li>
        <li class="item">
            <span>Item 2</span>
        </li>
    </ul>
</div>

이제 JavaScript에서 closest() 함수를 사용하여 .item 클래스를 가진 <span> 요소의 가장 가까운 <li> 요소를 찾는 예제를 작성해보겠습니다. 이때 null체크를 수행합니다.

JavaScript

const spanElement = document.querySelector("span");
const closestListItem = spanElement.closest("li");

if (closestListItem !== null) {
    console.log(closestListItem); // 출력: <li class="item">...</li>
} else {
    console.log("일치하는 요소가 없습니다.");
}

위의 예제에서는 closestListItem이 null이 아닌지 확인하여 가장 가까운 <li> 요소가 있는지를 확인합니다. 만약 null이 아니라면, 콘솔에 해당 요소를 출력하고, null이라면 "일치하는 요소가 없습니다."라는 메시지를 출력합니다. 이렇게 함으로써 closest() 함수의 반환값이 유효한지를 확인할 수 있습니다.