1 분 소요

웹 애플리케이션을 만들다 보면 특정 요소의 하위 노드를 선택해 스타일을 입히거나 내용을 변경해야 합니다.

제이쿼리 자손 요소 탐색 메소드 .children()(직계 자식)과 .find()(모든 자손)만 알면 복잡한 DOM도 한 줄로 제어할 수 있어 생산성이 급상승합니다.

.children() – 직계 자식만 빠르게 선택

특징

  • 한 단계 아래 노드만 탐색 → 성능 최적
  • 선택자 전달 시 조건에 맞는 자식만 필터링
$("#menu").children("li.active")
          .addClass("current");

팁: <ul> 안의 <li>처럼 반복 구조가 명확할 때 가장 깔끔합니다.

.find() – 모든 하위 레벨 깊이 탐색

특징

  • 손자·증손 등 모든 descendant 탐색
  • "*" 와일드카드로 전체 자손 선택 가능
$("#section").find("span.highlight")
             .css("background","#ff0");
$("#item").find("*").addClass("border"); // 전역 적용

.find()는 재귀적으로 내려가므로 깊은 DOM일수록 속도에 유의하세요.

.children() vs .find() 한눈 비교

구분 .children() .find()
탐색 깊이 1단계 자식 모든 하위 레벨
성능 빠름 (DOM 접근 최소) 깊을수록 느려질 수 있음
대표 사용처 메뉴·카드 리스트 폼 유효성 검사, 하이라이트 전파
선택자 활용 자식 중 필터링 가능 손자 이하까지 세밀 탐색

실전 예제: 네비게이션 바 활성화

<ul id="nav">
  <li class="item"><a href="#">Home</a></li>
  <li class="item active"><a href="#">About</a></li>
</ul>

<script>
$("#nav").children(".item.active")     // 직계 자식 li
        .find("a")                     // 그 하위 a
        .attr("aria-current","page")   // 접근성 강화
        .css("font-weight","700");
</script>
  • 1단계: children()으로 li.active 탐색
  • 2단계: find()로 a 링크 찾아 속성·스타일 변경 → 가독성 UP

성능·가독성 최적화 팁

  1. 범위 제한: $("#container").find(".target")처럼 상위 선택자로 탐색 영역을 줄이세요.
  2. 캐싱 활용: 반복 사용 요소는 const $items = $("#list").children();로 저장.
  3. 조건부 탐색: 필요 없는 와일드카드 "*" 호출을 피하고, 구체적 선택자를 사용해 렌더링 지연을 막으세요.

질문 정리

질문 답변
.children("\*")와 .find("\*") 차이는?** | .children(“”)는 **직계 자식 전체**, .find(“”)`는 **손자까지 전부 반환합니다.  
깊은 DOM에서 속도 문제를 줄이려면? 상위 컨테이너를 먼저 좁히고, 레이지 로딩·위임 이벤트 활용을 고려하세요.
Shadow DOM에도 적용되나요? 아니요. jQuery는 Shadow DOM 내부를 기본적으로 탐색하지 않습니다.
.filter()와 함께 쓰면? $(".card").children().filter(":odd")처럼 체이닝으로 가독성·성능을 높일 수 있습니다.
Vanilla JS querySelectorAll 대안은? 최신 브라우저만 대상으로, 성능·크기 최적화가 필요할 때는 순수 DOM API를 선택하세요.

카테고리:

업데이트:

댓글남기기

참고