[jQuery] 요소의 탐색 (기타 탐색 메서드)
복습
https://shins99.tistory.com/94
기타 탐색 메서드
기타 탐색 메서드
- DOM 트리에서 요소의 탐색을 위해 사용되는 기타 메서드
1. .add()
2. .each()
3. .end()
4. .offsetParent()
5. .contents()
.add() 메서드
- 선택한 요소의 집합에 전달받은 요소를 추가
|
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
$("li").add("p") // 선택한 <li>요소의 집합에 <p>요소를 추가함.
.css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
|
cs |
.append() 메서드의 예제
|
1
2
3
4
5
6
|
예제
$(function() {
$("button").on("click", function() {
$("#list").append("<li>새로 추가된 아이템이에요!</li>");
});
});
|
cs |
- .add() 메서드는 선택한 '요소의 집합'에 인수로 전달받은 요소를 추가하는 메서드
- .append() 메서드는 선택한 '요소'의 마지막에 새로운 요소나 콘텐츠를 추가하는 메서드
.each() 메서드
- 선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행
|
1
2
3
4
5
6
7
8
|
예제
$(function() {
$("button").on("click", function() {
$("li").each(function() { // 선택한 <li>요소 집합의 각 <li>요소를 선택함.
$(this).toggleClass("boldFont"); // 각 <li>요소마다 클래스를 추가하거나 제거함.
});
});
});
|
cs |
- 선택한 <li>요소 집합의 각 <li>요소에 .each() 메서드를 사용하여 클래스를 추가하거나 제거하는 예제
- .each() 메서드를 사용하면, 선택한 요소 집합의 각 요소마다 콜백 함수를 따로 실행 가능
.end() 메서드
- 마지막으로 실행한 메서드의 실행 전 상태로 선택한 요소의 집합을 복원
|
1
2
3
4
5
6
7
8
9
|
예제
$(function() {
$("button").on("click", function() {
$("#divBox") // id가 "divBox"인 요소의
.find("p") // 자손 요소 중에서 <p>요소를 모두 선택하고,
.end() // 선택된 요소의 집합을 find() 메서드의 실행 전으로 복원함.
.css("border", "2px solid green"); // 따라서 id가 "divBox"인 요소의 CSS 스타일을 설정함.
});
});
|
cs |
(만약 .end() 메서드가 없다면, 아이디가 "divBox"인 요소의 자손 요소 중에서 모든 <p>요소에 스타일을 설정하게 될 것)
.offsetParent() 메서드
- 선택한 요소를 위치시킬 때 기준으로 사용된 조상 요소를 선택 가능
|
1
2
3
4
5
6
7
8
|
예제
$(function() {
$("button").on("click", function() {
// id가 "para"인 요소가 위치할 때 기준이 된 조상 요소를 선택함.
$("#para").offsetParent()
.css("border", "1px solid red"); // 해당 요소의 CSS 스타일을 변경함.
});
});
|
cs |
- 아이디가 "para"인 요소를 웹 페이지에 위치시킬 때 기준 부모 요소는 position 속성값이 relative로 설정된 <ul>요소
- 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소가 위치를 정할 때 기준이 될 수 있음
(위와 같은 위치가 설정된 요소가 존재하지 않으면, <html>요소를 기준으로 삼게 됨)
.contents() 메서드
- 선택한 요소의 자식(child) 요소를 텍스트 노드와 주석 노드까지 모두 포함하여 선택
|
1
2
3
4
5
6
7
8
9
|
예제
$(function() {
$("button").on("click", function() {
$("iframe") // <iframe>요소의
.contents() // 자식 요소를 모두 선택한 후,
.find("a") // 그 중에서 <a>요소를 모두 선택하고,
.css("backgroundColor", "aqua"); // 선택된 모든 <a>요소의 CSS 스타일을 설정함.
});
});
|
cs |
- <iframe>요소의 모든 자식 요소를 선택한 후, 그 중에서 <a>요소만의 CSS 스타일을 변경하는 예제
- 버튼을 누르면, <iframe>요소에 로드된 모든 자식 요소 중 <a>요소의 배경색만이 변경될 것
(제이쿼리의 .contents() 메서드를 사용하면, <iframe>요소의 내용에도 직접 접근 가능)
기타 탐색 메서드
| .add() | 선택한 요소의 집합에 전달받은 요소를 추가함. |
| .addBack() | 선택한 요소의 집합에 바로 전에 선택했던 요소를 추가함. |
| .each() | 선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행함. |
| .end() | 마지막으로 실행한 메서드의 실행 전 상태로 선택한 요소의 집합을 복원함. |
| .offsetParent() | 선택한 요소를 위치시킬 때 기준이 되었던 조상 요소를 선택함. |
| .contents() | 선택한 요소의 자식(child) 요소를 모두 선택함. (텍스트 노드와 주석 노드까지 모두 포함함) |