조상 요소의 탐색
트리 탐색(tree traversing)
트리 탐색(tree traversing)이란 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정을 의미합니다.
이러한 트리 탐색은 다음과 같이 세 영역으로 나눌 수 있습니다.
1. 조상(ancestor) 요소 탐색
2. 형제(sibling) 요소 탐색
3. 자손(descendant) 요소 탐색
조상(ancestor) 요소의 탐색
DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같습니다.
1. .parent()
2. .parents()
3. .parentsUntil()
4. .closest()
.parent() 메소드
.parent() 메소드는 선택한 요소의 부모(parent) 요소를 선택합니다.
이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있습니다.
예제
$(function() {
$("button").on("click", function() {
$("p").parent() // <p>요소의 부모 요소를 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
.parents() 메소드
.parents() 메소드는 선택한 요소의 조상(ancestor) 요소를 모두 선택합니다.
이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있습니다.
예제
$(function() {
$("button").on("click", function() {
$("p").parents("div") // <p>요소의 조상 요소 중에서 <div>요소를 모두 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
.parentsUntil() 메소드
.parentsUntil() 메소드는 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다.
이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택합니다.
예제
$(function() {
$("button").on("click", function() {
// <p>요소의 조상 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택함.
$("p").parentsUntil("div")
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
.closest() 메소드
.closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택합니다.
이 메소드가 요소의 집합을 구하는 방식은 .parents() 메소드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다릅니다.
예제
$(function() {
$("#parents").on("click", function() {
// 아이디가 "origin"인 요소의 조상 요소 중에서 <div>요소를 모두 선택함.
$("#origin").parents("div")
.css({"border": "2px solid red"});
});
$("#closest").on("click", function() {
// 아이디가 "origin"인 요소 자신과 조상 요소 중에서 첫 번째 <div>요소를 선택함.
$("#origin").closest("div")
.css({"border": "2px solid green"});
});
});
조상 요소를 탐색하는 메소드
| 메소드 | 설명 |
|---|---|
|
.parent() |
선택한 요소의 부모(parent) 요소를 선택함. |
| .parents() | 선택한 요소의 조상(ancestor) 요소를 모두 선택함. |
| .parentsUntil() | 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. |
| .closest() | 선택한 요소를 포함한 조상 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택함. |
