자바스크립트 closest() 함수 사용법

`Element.closest()`

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

CSS 선택자 소개

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

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() 함수의 반환값이 유효한지를 확인할 수 있습니다.