jQuery 탐색 - 자손

jQuery를 사용하여 DOM 트리를 쉽게 탐색하여 요소의 자손을 찾을 수 있습니다。

자손은 자식, 조카, 증손 등입니다。

이 장에서는 DOM 트리를 탐색하는 방법을 설명하겠습니다。

DOM 트리 탐색

다음은 DOM 트리를 탐색하는 데 사용되는 jQuery 메서드들입니다：

• children()

• find()

각 메서드를 사용하는 방법을 보여드리겠습니다。

jQuery children() 메서드

jQuery children()메서드는 선택된 요소의 모든 직접 자식 단계를 반환합니다。

이 메서드는 DOM 트리에서 단일 단계만 탐색합니다。

아래 예제는 DIV의 직접 자식 요소를 반환합니다：

$("document").ready(function(){
　　$("div").children().css("background-color",　"coral");
});

선택가능한 매개변수를 사용하여 검색 항목을 필터링할 수 있습니다。

이 예제는 DIV의 직접 자식 <p> 요소를 반환합니다：

$("document").ready(function(){
　　$("div").children("p").css("background-color",　"coral");
});

jQuery find() 메서드

jQuery find()이 메서드는 지정된 매개변수와 일치하는 모든 자손 요소를 반환합니다。

이 메서드는 DOM 요소의 자손을 탐색하여 마지막 자손까지 내려가는 것입니다。

모든 <p> 요소에서 시작하여 자손 <span> 요소를 탐색합니다. $("p span")와는 다릅니다：

$("document").ready(function(){
　　$("p").find("span").css("background",　"mediumpurple");
});

여러 자손을 반환하려면 선택자 이름을 콤마로 구분하세요。

다음 예제는 <p> 요소의 자손인 모든 <span>과 <i> 요소를 반환합니다：

$("document").ready(function(){
　　$("p").find("span,　i").css("background",　"mediumpurple");
});

jQuery 탐색 참조

완전한 탐색 메서드에 대한 정보는 다음을 방문하세요jQuery 탐색 참조。