[jQuery] 요소의 탐색 (조상 요소의 탐색)
복습
https://shins99.tistory.com/84
[jQuery] 요소의 복사 및 삭제
복습 https://shins99.tistory.com/83 [jQuery] 요소의 추가 복습 https://shins99.tistory.com/82 [jQuery] 선택 요소에 접근 복습 https://shins99.tistory.com/81 [jQuery] 제이쿼리 선택자 복습 https://shins99.tistory.com/80 [jQuery] CSS
shins99.tistory.com
조상 요소의 탐색
트리 탐색(tree traversing)
- 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정
1. 조상(ancestor) 요소 탐색
2. 형제(sibling) 요소 탐색
3. 자손(descendant) 요소 탐색
조상(ancestor) 요소의 탐색
- DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메서드
1. .parent()
2. .parents()
3. .parentsUntil()
4. .closest()
.parent() 메서드
- 선택한 요소의 부모(parent) 요소를 선택
(선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있음)
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
$("p").parent() // <p>요소의 부모 요소를 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
|
cs |
.parents() 메서드
- 선택한 요소의 조상(ancestor) 요소를 모두 선택
(선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있음)
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
$("p").parents("div") // <p>요소의 조상 요소 중에서 <div>요소를 모두 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
|
cs |
.parentsUntil() 메서드
- 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택
(선택자를 인수로 전달하지 않으면, .parent() 메서드와 같이 선택한 요소의 조상 요소를 모두 선택)
|
1
2
3
4
5
6
7
8
|
예제
$(function() {
$("button").on("click", function() {
// <p>요소의 조상 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택함.
$("p").parentsUntil("div")
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
|
cs |
.closest() 메서드
- 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택
(요소의 집합을 구하는 방식은 .parents() 메소드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다름)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
예제
$(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"});
});
});
|
cs |
조상 요소를 탐색하는 메서드
| .parent() | 선택한 요소의 부모(parent) 요소를 선택함. |
| .parents() | 선택한 요소의 조상(ancestor) 요소를 모두 선택함. |
| .parentsUntil() | 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. |
| .closest() | 선택한 요소를 포함한 조상 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택함. |