Traversing(순회)
"순회"를 의미하는 traversing은 다른 요소와의 관계를 기반으로 HTML 요소를 찾거나 선택하는데에 사용된다.
하나의 선택으로 시작하여 원하는 요소에 도달할 때까지 해당 선택을 통해 이동한다.
아래 이미지는 HTML 페이지를 트리(DOM 트리)로 보여준다. traversing을 사용하면 선택한(현재) 요소에서 시작하여 트리에서 쉽게 위(상위), 아래(자손) 및 옆으로(형제) 이동할 수 있다. 이 이동을 DOM 트리 통과(또는 순회)라고 한다.
- <div> 요소는 <ul>의 부모 이며 그 안에 있는 모든 것의 조상이다.
- <ul> 요소는 <li> 요소의 부모이자 <div>의 자식이다.
- 왼쪽 <li> 요소는 <span>의 부모 , <ul>의 자식 및 <div>의 자손이다.
- <span> 요소는 왼쪽 <li>의 자식 이며 <ul> 및 <div>의 자손이다.
- 두 <li> 요소는 형제다. (같은 부모를 공유함)
- 오른쪽 <li> 요소는 <b>의 부모 , <ul>의 자식 및 <div>의 자손이다.
- <b> 요소는 오른쪽 <li>의 자식 이며 <ul> 및 <div>의 자손이다.
조상은 부모, 조부모, 증조부모 등이다. 자손은 자녀, 손자, 증손자 등이다. 형제 자매는 같은 부모를 공유한다.
Traversing - Ancestors(조상)
jQuery를 사용하면 DOM 트리를 탐색하여 요소의 조상을 찾을 수 있다.
조상은 부모, 조부모, 증조부모 등이다.
DOM 트리를 탐색하는 세 가지 유용한 jQuery 메소드는 아래와 같다.
- parent()
- parents()
- parentsUntil()
parent()
parent()메소드는 선택한 요소의 직접 상위 요소를 반환한다.
이 메소드는 DOM 트리에서 한 단계 위로만 이동한다.
각 <span> 요소의 직접적인 부모 요소를 반환받기:
$(document).ready(function(){
$("span").parent();
});parents()
parents()메소드는 문서의 루트 요소( <html>)까지 선택한 요소의 모든 상위 요소를 반환한다.
이 메소드는 DOM 트리에서 한 단계 위로만 이동한다.
<span>요소의 모든 조상을 반환받기:
$(document).ready(function(){
$("span").parents();
});매개변수를 사용하여 조상 검색을 필터링할 수도 있다.
<span>요소의 모든 <ul> 조상을 반환받기:
$(document).ready(function(){
$("span").parents("ul");
});parentUntil()
parentsUntil()메소드는 주어진 두 인수 사이의 모든 조상 요소를 반환한다.
이 메소드는 DOM 트리에서 한 단계 위로만 이동한다.
<span> 과 <div>요소 사이의 모든 조상 요소를 반환받기:
$(document).ready(function(){
$("span").parentsUntil("div");
});Traversing - Descendants(자손)
jQuery를 사용하면 DOM 트리를 탐색하여 요소의 자손을 찾을 수 있다.
자손은 자녀, 손자, 증손자 등이다.
DOM 트리를 탐색하는 세 가지 유용한 jQuery 메소드는 아래와 같다.
- children()
- find()
children()
children()메소드는 선택한 요소의 모든 직계 자식을 반환한다.
이 메소드는 DOM 트리 아래의 단일 레벨만 탐색한다.
각 <div>요소의 직계 자식인 모든 요소를 반환하기:
$(document).ready(function(){
$("div").children();
});매개변수를 사용하여 어린이 검색을 필터링할 수도 있다.
<p>의 직계 자식인 클래스 이름이 "first"인 모든 <div> 요소를 반환하기:
$(document).ready(function(){
$("div").children("p.first");
});find()
find()메소드는 선택한 요소의 하위 요소를 마지막 하위 요소까지 반환한다.
<div> 의 자손 중 모든 <span> 요소를 반환하기:
$(document).ready(function(){
$("div").find("span");
});<div> 의 모든 자손 요소를 반환하기:
$(document).ready(function(){
$("div").find("*");
});Traversing - Siblings(형제 자매)
jQuery를 사용하면 DOM 트리에서 옆으로 이동하여 요소의 형제를 찾을 수 있다.
형제 자매는 같은 부모를 공유한다.
DOM 트리에서 옆으로 탐색하는 데 유용한 jQuery 메서드가 많이 있다.
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
siblings()
siblings()메소드는 선택한 요소의 모든 형제 요소를 반환한다.
<h2> 요소의 모든 형제 요소를 반환하기:
$(document).ready(function(){
$("h2").siblings();
});매개변수를 사용하여 형제 검색을 필터링할 수도 있다.
<h2> 요소의 모든 형제 <p> 요소를 반환하기:
$(document).ready(function(){
$("h2").siblings("p");
});next()
next()메소드는 선택한 요소의 다음 형제 요소를 반환한다.
<h2> 요소의 다음 형제 요소를 반환하기:
$(document).ready(function(){
$("h2").next();
});nextAll()
nextAll()메소드는 선택한 요소의 모든 다음 형제 요소를 반환한다.
<h2> 요소의 모든 다음 형제 요소를 반환하기:
$(document).ready(function(){
$("h2").nextAll();
});nextUntil()
nextUntil()메소드는 주어진 두 인수 사이의 모든 다음 형제 요소를 반환한다.
<h2>와 <h6>요소 사이의 모든 형제 요소를 반환하기:
$(document).ready(function(){
$("h2").nextUntil("h6");
});prev(), prevAll(), prevUntil() 는 next와 동일하게 작동하지만 반대인 이전 형제들을 반환한다.
Traversing - Filtering
- first()
- last()
- eq()
- filter()
- not()
가장 기본적인 필터링 방법은 first(), last(), eq()이며 요소 그룹에서의 위치에 따라 특정 요소를 선택할 수 있다.
filter() 및 not()와 같은 다른 필터링 방법을 사용하여 특정 기준과 일치하거나 일치하지 않는 요소를 선택할 수 있다.
first()
first()는 지정된 요소의 첫 번째 요소를 반환한다.
<div> 의 첫 번째 요소를 선택하기:
$(document).ready(function(){
$("div").first();
});last()
last()는 지정된 요소의 마지막 요소를 반환한다.
<div> 의 마지막 요소를 선택하기:
$(document).ready(function(){
$("div").last();
});eq()
eq()메소드는 선택한 요소의 특정 인덱스 번호가 있는 요소를 반환한다.
인덱스 번호는 0부터 시작하므로 첫 번째 요소는 1이 아닌 0의 인덱스 번호를 갖게 된다.
<p>요소의 1번 인덱스 번호 요소를 선택하기:
$(document).ready(function(){
$("p").eq(1);
});filter()
filter()메소드는 기준을 지정할 수 있다. 기준에 일치하지 않는 요소는 선택 항목에서 제거되고 일치하는 요소는 반환된다.
<p> 요소 중 클래스 이름이 "intro"인 모든 요소를 반환하기:
$(document).ready(function(){
$("p").filter(".intro");
});not()
not()메소드는 기준과 일치하지 않는 모든 요소를 반환한다. filter() 의 반대다.
<p> 요소 중 클래스 이름이 "intro"가 아닌 모든 요소를 반환하기:
$(document).ready(function(){
$("p").not(".intro");
});