[jQuery 기초] find(), parent(), children()

jQuery DOM 탐색 🔍

HTML 요소는 부모와 자식 관계로 구성되어 있습니다.

예를 들어

div
 └ ul
     └ li

이처럼 HTML 구조 안에서
특정 요소를 찾을 때 DOM 탐색 메서드를 사용합니다.

대표적으로 다음 메서드가 있습니다.

find()
parent()
children()

주요 포인트 Top3

01. find() 메서드 🔍

find()는 선택한 요소 내부에서 특정 요소를 찾는 메서드입니다.

예) 💡

$(".menu").find("li")

설명

menu 안에 있는 li 요소 선택

HTML 구조

<ul class="menu">
  <li>menu1</li>
  <li>menu2</li>
</ul>

스타일 적용 예

$(".menu").find("li").css({
  color:"red"
})

설명

menu 내부 li 색 변경

📌 Tip. find 특징

find는 선택된 요소 내부 전체 범위에서 검색합니다.

즉

자식
손자
후손

모든 요소를 찾을 수 있습니다.

02. parent() 메서드 ⬆

parent()는 현재 요소의 부모 요소를 선택하는 메서드입니다.

예) 💡

$(".item").parent()

설명

item의 부모 요소 선택

HTML 구조

<ul>
  <li class="item">menu</li>
</ul>

스타일 적용 예

$(".item").parent().css({
  background:"yellow"
})

설명

item 부모 요소 배경 변경

📌 Tip. parent 특징

parent는 바로 위 부모 요소만 선택합니다.

현재 요소
→ 바로 위 부모

03. children() 메서드 ⬇

children()은 선택된 요소의 자식 요소를 선택하는 메서드입니다.

예) 💡

$(".menu").children()

설명

menu의 자식 요소 선택

HTML 구조

<ul class="menu">
  <li>menu1</li>
  <li>menu2</li>
</ul>

특정 요소 선택

$(".menu").children("li")

설명

menu의 li 자식 요소 선택

📌 Tip. children 특징

children은 바로 아래 자식만 선택합니다.

부모
→ 바로 아래 자식

손자 요소는 선택되지 않습니다.

04. find vs children 차이

두 메서드는 선택 범위가 다릅니다.

find → 내부 전체 검색
children → 바로 아래 자식만

예

find → 자식 / 손자 / 후손
children → 자식만

GOYO.’s Tip 💡

DOM 탐색 메서드는 HTML 구조를 기준으로 요소를 선택할 때 사용합니다.

특히 다음 상황에서 많이 사용됩니다.

메뉴 구조
리스트 구조
갤러리
탭 메뉴

마무리

이번 글에서는 jQuery에서 HTML 구조를 탐색할 때 사용하는

find()
parent()
children()

메서드를 정리했습니다.

이 메서드를 사용하면
HTML 구조 안에서 원하는 요소를 쉽게 찾을 수 있습니다.