jQuery 태그 요소를 조회하는 closest(), find() 함수를 알아보자

오늘은 jQuery의 closest와 find 함수에 대한 내용을 주제로 글을 쓰려고 한다. 두 함수는 모두 태그 요소를 조회하기 위한 함수이며, children, parent 함수와 유사한 기능을 제공하고 있다. 간단하게 closest는 선택자 기준에서 가장 가까운 상위 요소를 찾고 다룰 수 있는 함수고, find는 선택자 기준에서 가장 가까운 하위 요소를 찾고 다룰 수 있는 기능이다. children, parent와 매우 유사하지만 사용법에 대해서 차이가 있기 때문에 차이점도 함께 확인해보도록 하자.

---

closest()

closest() 함수는 jQuery에서 제공하는 DOM 탐색 메서드 중 하나로써, 선택한 요소부터 시작하여 DOM 트리를 위로 올라가며 가장 가까운 상위 요소를 찾는 기능이다.
선택한 요소 자체도 검색 대상에 포함될 수 있으며, 주어진 선택자와 일치하는 상위 요소가 없을 경우에는 빈 jQuery 객체를 반환한다.

함수의 특징

상위 요소 검색
주어진 선택자와 일치하는 가장 가까운 상위 요소를 찾는다.
선택한 요소의 조상 요소를 탐색할 때 유용하다.

다중 선택자
선택자를 지정하지 않거나 여러 개의 선택자를 지정할 수 있다.
가장 가까운 상위 요소 중 하나만 반환한다.

결과 반환
선택한 요소와 주어진 선택자에 일치하는 첫 번째 상위 요소를 반환한다.
반환된 요소는 jQuery 객체로 반환되며, 해당 요소에 대해 jQuery의 다른 메서드를 계속해서 호출할 수 있다.

DOM 트리 검색
선택한 요소의 부모 요소부터 시작하여 상위로 탐색하며, DOM 트리를 따라 올라간다.
상위 요소를 탐색하면서 선택자와 일치하는 요소를 찾는다.

최적화
closest 함수는 효율적으로 동작하여 상위 요소를 빠르게 찾는다.
DOM 트리를 효율적으로 탐색하여 최초로 일치하는 요소를 찾으면 검색을 중단한다.

---

closest() 함수 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    // span#childId01에서 부모 요소 rootId 찾기
    const childClass = $('#childId01').closest('#rootId').attr('class');
    console.log(childClass);
});
</script>

<div>
    <div id="rootId" class="root_class">
        <span>Closest</span>
        <hr>
        <span class="input_class_01">안녕하세요.</span>
        <div class="child_class">
            <div>
                <span id="childId01">반갑습니다.</span>
                <br>
                <span id="childId02">산코디입니다.</span>
            </div>
        </div>
    </div>
</div>

위의 예제 소스 코드는 closest() 함수를 사용하여 자식 요소에서 부모 요소를 찾는 예제다. 1 레벨만 찾을 때에는 parent() 함수와 크게 다르진 않다. 하지만 1 레벨 이상을 찾아가는 경우에는 closest() 함수가 상당히 편리하게 작용을 하게 된다.

---

실행 결과

실행 결과는 요소를 잘 찾아서 결과를 출력한 내용이다.

// 가능
$('#childId01').closest('#rootId').attr('class');
// 가능
$('#childId01').closest('.child_class').closest('#rootId').attr('class');

위의 예시와 같이 span#child01 요소에서 2 레벨 위의 부모인 div#rootId 요소를 찾을 수 있고,
중간 요소인 div.child_class 요소를 찾은 다음에 찾아도 가능하다.

---

closest()  VS  parent() 차이점 비교

closest() 함수와 parent() 함수는 jQuery에서 DOM 탐색에 사용되는 함수다. 선택자 기준에서 상위 요소를 찾는다는 공통점이 있지만 사용법은 다르기 때문에 차이점을 비교하고 상황에 맞는 함수를 사용하는 것이 좋다.

대상 요소 선택

closest()
지정된 선택자에 가장 가까운 조상 요소를 찾으며, 선택한 요소부터 시작하여 DOM 트리를 올라가며 가장 가까운 조상 요소를 찾는다.
parent()
지정된 선택자의 직계 부모 요소를 선택한다. 즉 선택한 요소의 바로 위에 있는 부모 요소를 선택할 수 있다.

반환 값

closest()
선택한 요소의 가장 가까운 조상 요소를 반환한다. 단일 요소를 반환하며, 선택한 요소 자체를 포함할 수 있다.
parent()
직계 부모 요소를 반환한다. 단일 요소를 반환하며, 선택한 요소의 부모 요소를 반환한다.

선택자 적용 범위

closest()
시작 요소로부터 시작하여 DOM 트리를 올라가며 가장 가까운 조상 요소를 찾기 때문에 조상 요소 중 하나만 반환한다.
parent()
선택한 요소의 직계 부모 요소만을 선택하므로 상위 수준의 부모 요소만을 반환한다.

closest() 함수는 선택한 요소로부터 가장 가까운 조상 요소를 찾고, parent() 함수는 선택한 요소의 직계 부모 요소를 선택하다는 차이점이 있다.

---

find()

find() 함수는 jQuery에서 사용되는 DOM 탐색 메서드 중 하나로써, 선택한 요소 내에서 하위 요소를 찾는다.
주어진 선택자와 일치하는 모든 하위 요소를 반환하며, 선택한 요소의 자손 요소를 탐색할 때 사용된다.

함수의 특징

하위 요소 탐색
주어진 선택자와 일치하는 모든 하위 요소를 찾는다.
선택한 요소의 자손 요소를 대상으로 탐색한다.

다중 선택자
선택자를 지정하여 해당 선택자와 일치하는 모든 하위 요소를 찾는다.
여러 개의 선택자를 지정할 수 있으며, 각 선택자에 대해 모든 일치하는 하위 요소를 반환한다.

결과 반환
선택한 요소 내에서 주어진 선택자와 일치하는 모든 하위 요소를 반환한다.
반환된 요소는 jQuery 객체로 반환되며, 해당 요소에 대해 jQuery의 다른 메서드를 계속해서 호출할 수 있다.

DOM 트리 탐색
선택한 요소의 자손 요소들을 모두 탐색하여 주어진 선택자와 일치하는 요소를 찾는다.
하위 요소를 탐색하면서 DOM 트리를 내려간다.

최적화
find() 함수는 효율적으로 동작하여 선택한 요소 내에서 하위 요소를 빠르게 찾는다.
DOM 트리를 효율적으로 탐색하여 일치하는 요소를 찾으면 검색을 중단한다.

---

find() 함수 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    // div#rootId에서 find를 이용하여 span#childId01 자식 요소 찾기
    const childId02 = $('#rootId').find('#childId02').text();
    console.log(childId02);
});
</script>

<div>
    <div id="rootId" class="root_class">
        <span>Closest</span>
        <hr>
        <span class="input_class_01">안녕하세요.</span>
        <div class="child_class">
            <div>
                <span id="childId01">반갑습니다.</span>
                <br>
                <span id="childId02">산코디입니다.</span>
            </div>
        </div>
    </div>
</div>

find() 함수 역시 children() 함수와 동일하게 선택한 요소에서 자식 요소를 찾을 때 사용되는 기능이다.
closest()와 동일하게 한 번에 여러 레벨을 건너뛰고 원하는 요소를 찾을 때 용이하다.

// 가능
$('#rootId').find('#childId02').text();
// 가능
$('#rootId').find('child_class').find('#childId02').text();

위의 예시와 같이 #rootId요소에서 2 레벨 하위의 span#childId02 요소를 한 번에 찾을 수도 있고, 한 레벨씩 찾아 내려갈 수도 있다.

---

실행 결과

closest() 함수와 마찬가지로 결과가 잘 호출된 모습이다.

---

find()  VS  children() 차이점 비교

find() 함수와 children() 함수는 모두 jQuery에서 DOM 요소를 선택하는 함수다. 그러나 이 두 함수의 사용법은 조금 다른 점이 있다.

선택 범위

find()
선택한 요소의 하위 요소 중에서 지정된 선택자에 해당하는 모든 요소를 선택한다. 즉, 선택한 요소의 자손 요소를 대상으로 한다.
children()
선택한 요소의 직계 자식 요소만을 선택한다. 즉, 선택한 요소의 바로 아래에 있는 자식 요소만을 대상으로 한다.

반환 값

find()
선택한 요소의 자손 요소 중에서 지정된 선택자에 해당하는 모든 요소를 반환하며, 여러 개의 요소를 반환할 수 있다.
children()
선택한 요소의 직계 자식 요소 중에서 지정된 선택자에 해당하는 모든 요소를 반환하며, 일반적으로 단일 요소가 아닌 여러 요소를 반환할 수 있다.

선택자 적용 범위

find()
선택한 요소의 하위 요소를 대상으로 하며, DOM 트리를 깊게 탐색하여 모든 자손 요소를 검색한다.
children()
선택한 요소의 직계 자식 요소만을 대상으로 하며, 하위 수준의 요소에는 적용되지 않는다.

find() 함수는 선택한 요소의 하위 요소를 대상으로 하고, children() 함수는 선택한 요소의 직계 자식 요소를 대상으로 한다는 차이점이 있다.

반응형

---

closest()와 find() 함수 사용 시 주의사항

closest()와 find() 함수는 요소를 찾는 데 유용한 함수지만 몇 가지 주의사항이 있다.

closest()

부모 요소 검색
closest() 함수는 현재 요소부터 상위로 탐색하여 가장 가까운 조상 요소를 찾는데, 최상위 조상 요소를 찾기 위해 DOM 트리를 처음부터 끝까지 탐색해야 할 수 있다. 그렇기 때문에 성능에 영향을 줄 수 있으므로 이 부분을 고려해서 사용해야 한다.

가장 가까운 요소 반환
closest() 함수는 현재 요소와 가장 가까운 하나의 조상 요소만 반환한다. 따라서 여러 조상 요소를 찾고자 할 때는 주의가 필요하다.

find()

하위 요소 검색
find() 함수는 현재 요소의 모든 하위 요소 중에서 지정된 선택자에 해당하는 모든 요소를 찾는다. 따라서 DOM 트리를 깊게 탐색하여 모든 자손 요소를 검색할 수 있으므로 성능에 영향을 줄 수 있다.

복잡한 선택자 사용
find() 함수를 사용할 때 지정된 선택자가 너무 복잡하면 잘못된 요소를 선택할 수 있다. 따라서 가능하면 간단한 선택자를 사용하고 필요한 경우 선택자를 구체적으로 지정해야 한다.

---

마무리

오늘은 closest() 함수와 find() 함수 기능에 대해 정리해 봤다. UI 개발을 하다보면 HTML 내의 요소를 찾아 상태를 바꾸고 스타일을 변경하는 등 다양한 작업이 필요로 하는데, 유사한 기능인 parent() 함수와 children() 함수를 사용하기에는 한계가 있기 때문에 closest() 함수와 find() 함수를 적절히 섞어서 활용하는 것이 좋다. closest()와 find() 함수가 한 번에 찾을 수 있다는 장점때문에 해당 함수만 너무 사용한다면 성능에 영향을 줄 수 있으므로, 찾아야 하는 요소의 위치가 어느 정도인지 파악하고 적절한 함수를 사용하는 것이 중요하다.