자식 노드 찾기

01_소개

자식 노드란? 특정 노드의 바로 아래에 위치하고 있는 노드를 말한다. 하위 노드의 하위 노드는 자식 노드가 아니다. 

 

02_ 핵심내용

02_1 모든 자식 노드 찾기

$대상.children()

특정 노드의 바로 하위에 위치한 모든 자식 노드를 찾고 싶을 때 children() 메서드를 사용한다. children()메서드의 결과값은 모든 자손 노드가 아니라 바로 하위에 위치하는 자식 노드만을 구한다.

 

※children() vs contents()

자식노드를 구하는 메서드 중에는 contents()메서드도 있다. children()은 자식 노드 중 오직 태그 노드 만을 골라 찾아준다. 

1. contents()를 사용할 경우

태그 노드는 물론 텍스트 노드 등의 모든 자식 노드를 노드로 찾아준다.

 

02_2 특정 자식 노드만 찾기

$대상.children("선택자")

 

children("선택자") 메서드를 이용하면 선택자에 해당하는 특정 자식 노드만을 찾을 수 있다. 

 

※주의 할 점

find()메서드는 바로 다음 하위 자식 노드에서만 찾는 것아닌 모든 자손 노드에서 찾는 것이기 때문에 children()메서드와 전혀 다른 결과 값이 나온다. 주의해서 사용해 줘야 한다. 

 

02_3 첫번 째 자식 노드 찾기

$대상.children().first()
$대상.children().eq(0)
$대상.children(":first")
$대상.children(":eq(0)")

 

첫번째 자식 노드를 찾는 방법은 위 사용법에 있는 것처럼 4가지 방법이 있다. 방법은 크게 선택자를 사용하는 방법과 메서드를 이용하는 방법 두 가지로 나눌 수 있다. 

두개를 비교하면 first()메서드를 한번더 호출 하는 것보다 children()메서드를 한번만 호출해 해결하는게 더 효율적이다.

 

02_4 마지막 번째 자식 노드 찾기

$대상.children().last()
$대상.children(":last")
$대상.children().eq($대상.length-1)
$대상.children(":eq("+($대상.children().length-1)+")")
$대상.children().eq(-1)
$대상.children(":eq(-1)")

마지막 번째 자식 노드 찾는 방법 역시 네가지 정도가 있다. 주로 첫 번째와 두 번째 방법을 많이 사용한다.

 

02_5 n번째 자식 노드 찾기

$대상.children().eq(index)
$대상.children(":eq("+index+")")

 자식 노드 중 n번째 자식 노드에 접근하는 방법 역시 eq(n) 메서드와 ".eq(n)" 선택자를 이용해 찾을 수 있다.