jQuery 탐색 메서드

jQuery에서 제공하는 탐색 메서드를 활용하면 순수 js를 통해서 요소를 찾을 때보다 간편하게 찾을 수 있습니다.
오늘은 탐색 메서드에 대해 예시를 통해 알아봅시다.

📌 JSP DOM 예시

<div class="wrapper">
  <div id="card1" class="card">
      <div class="card-header">header1</div>
      <div class="card-body">
        <p class="desc">body1</p>
        <button id="btn1" class="btn-detail">button1</button>
      </div>
   </div>
   <div id="card2" class="card">
      <div class="card-header">header2</div>
      <div class="card-body">
        <p class="desc">body2</p>
        <button id="btn2" class="btn-detail">button2</button>
      </div>
   </div>
   <div id="card3" class="card">
      <div class="card-header">header3</div>
      <div class="card-body">
        <p class="desc">body3</p>
        <button id="btn3" class="btn-detail">button3</button>
      </div>
   </div>
</div>

메서드를 살피기에 앞서 오늘 사용할 JSP DOM형태의 예시입니다.
위 DOM 예시를 활용하여 탐색 메서드를 활용하는 법을 살펴봅시다.

📌 조상(부모) 요소

1. parent / parents

	$('#btn1').parent();  // .card-body 요소 1개
    $('#btn1').parents(); // .card-body, .card, .wrapper, ... html까지

parent()는 바로 위 부모 요소만을 반환하므로 탐색에 활용하기에는 적합하지 않습니다.
반면 parents()의 경우 바로 위 부모 요소(card-body)부터 최상위 조상(html) 순으로 선택자에 해당하는 요소를 모두 탐색하여 반환합니다.

	$('.btn-detail').on('click', function(){
      	const card = $(this).parents('.div'); // 각 버튼의 조상 중 모든 div 요소를 찾아 반환 (.card-body, .card, .wrapper) 
    });

2. closest
closest()는 자기 자신에서부터 시작하여 최상위 조상 순으로 요소를 탐색하면서 찾은 요소 중 가장 가까운 요소를 반환합니다. parents()와 유사하지만 최대 1개의 요소만을 반환하는 것에 차이가 있습니다.
closest()의 경우 찾고자 하는 선택자 인자를 받아야만 정상적으로 동작합니다.

	$('#btn1').parents('div');  // .card-body, .card, .wrapper 요소 3개 반환
	$('#btn1').closest('div');  // .card-body 요소 1개 반환

특정 요소가 속해있는 상위 요소를 찾고 싶다면 closest()를 활용하는 것이 좋습니다.

	$('.btn-detail').on('click', function(){
      	const card = $(this).closest('.card'); // 각 버튼이 속해 있는 카드(.card) 요소 탐색
    });

📌 자손(자식) 요소

1. children

	$('#card1').children();  // .card-header, .card-body

children()은 직계 자식의 요소를 모두 선택하여 반환합니다.
parent()와 대비되는 개념이지만, 부모 요소는 하나만 존재할 수 있고, 자식 요소는 여러 개가 있을 수 있다는 점에서 차이가 있습니다.

2. find

	$('#card1').find('.btn-detail');  // #btn1 요소를 반환 
	$('#wrapper').find('.btn-detail'); // #btn1, #btn2, #btn3 요소를 반환

find()는 모든 후손 요소 가운데 선택자에 해당되는 요소를 반환하는 메서드입니다.
find()의 경우에도 parents()와 대비되는 개념이지만, children()와 마찬가지로 후손 요소가 여러 갈래로 나뉠 수 있다는 것에 차이가 있습니다.

✅ 결론 및 느낀점

이번에 조상과 자손 탐색 메서드만을 중점으로 다룬 이유는, Jsp 프로젝트에서 DOM을 조작할 때 특정 요소에 속해있는 부모 요소의 자식 요소를 찾아야 하는 경우를 많이 경험했었기 때문입니다.
그래서 위의 탐색 메서드 외에도 siblings(), next(), prev() 등 여러 종류의 탐색 메서드가 있지만 조상과 자손 탐색 메서드에만 포커스를 맞췄습니다.

DOM을 조작할 때 느낀 것은 항상 간편하지만 언제나 선택자 설정에 주의해야 한다는 것입니다. 자칫하면 원하지 않는 요소도 찾아와서 이벤트나 스타일이 적용되는 경우도 있기에 조심해서 사용해야 합니다.