자손 요소의 탐색
자손(descendant) 요소의 탐색
DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메소드는 다음과 같습니다.
1. .children()
2. .find()
.children() 메소드
.children() 메소드는 선택한 요소의 자식(child) 요소를 모두 선택합니다.
이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있습니다.
예제
$(function() {
$("button").on("click", function() {
$("ul").children() // <ul>요소의 자식 요소를 모두 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
.find() 메소드
.find() 메소드는 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택합니다.
이때 별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있습니다.
예제
$(function() {
$("button").on("click", function() {
$("li").find("*") // 각 <li>요소의 자손 요소을 모두 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
자손 요소를 탐색하는 메소드
| 메소드 | 설명 |
|---|---|
|
.children() |
선택한 요소의 자식(child) 요소를 모두 선택함. |
|
.find() |
선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택함. |
