jQuery 트리 구조 탐색

트리 구조 탐색(Tree Traversal) : DOM Tree 구조를 기반으로 찾아가는 방식

메서드	설명
children()	선택한 노드의 모든 자식 노드를 선택
find()	선택한 노드의 자손 노드 중 조건에 맞는 노드를 선택
next()	선택한 노드의 다음 노드를 선택
nextAll()	선택한 노드의 다음 모든 노드를 선택
parent()	선택한 노드의 부모 노드를 선택
parents()	선택한 노드의 모든 부모 노드를 선택
prev()	선택한 노드의 이전 노드를 선택
prevAll()	선택한 노드의 모든 이전 노드를 선택
closest()	선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택
nextUntil()	다음에 위치한 노드를 조건에 맞을 때까지 찾는다.
parentsUntil()	조건이 참이 될 때까지 부모 노드를 찾는다.
prevUntil()	이전에 위치한 노드를 조건에 맞을 때까지 찾는다.
siblings()	형제 노드들을 모두 찾는다.

 

*활용도가 빈도가 높은 트리 구조 탐색

$('div#container').children('p') // div#container 태그의 자식 태그들 중에서 <p> 태그를 모두 선택한다. 자손 레벨에서 찾지 않고 자식 레벨에서만 찾는다.
$('div#container').find('p') // div#container 태그의 자손 태그들 중에서 <p> 태그를 모두 찾아 선택. children()과 find()의 차이점은 자식까지 찾느냐, 자손까지 찾느냐이다.
$('p#part1').prev() // id값이 part1인 <p> 태그의 바로 앞에 위치한 노드를 선택. 매개 변수로 찾고 싶은 노드를 전달 할 수 있음.
$('p#part1').next() // id값이 part1인 <p> 태그의 바로 다음에 위치한 노드를 선택. 매개 변수로 찾고 싶은 노드를 전달 할 수 있음.
$('p#part1').siblings() // id값이 part1인 <p> 태그의 형제 노드 선택. 매개 변수로 찾고 싶은 노드를 전달 할 수 있음.
$('p#part1').parent() // id값이 part1인 <p> 태그의 부모 노드 선택