[jQuery]트레버싱

2017. 9. 20. 16:52

트레버싱?? 트레버싱은 '이동'을 의미합니다.

HTML 요소를 다른 요소와의 관계를 기반으로 '찾기' 또는 '선택'하는 데 사용됩니다.

아래 이미지는 HTML 페이지를 DOM 트리로 나타낸 것입니다.

jQuery 탐색을 사용하면 현재요소부터 위(부모),아래(자식),옆(형제)로 쉽게 이동할 수 있습니다.

트리를 탐색하는데 주로 사용되는 메소드를 알아보도록 하겠습니다.

parent() - 선택된 요소의 직접적인 부모 요소를 반환

1
2
3

$(document).ready(function(){
    $("span").parent();
});

cs

parents() - 선택된 요소의 모든 부모 요소를 문서의 루트 요소 (<html>)까지 반환

1
2
3

$(document).ready(function(){
    $("span").parents();
});

cs

parentsUntil() - 주어진 두 인수 사이에 모든 부모 요소를 반환

1
2
3

$(document).ready(function(){
    $("span").parentsUntil("div");
});
Colored by Color Scripter

cs

<span> 요소와 <div> 요소 사이에 모든 조상 요소를 반환합니다.

children() - 선택한 요소의 모든 직접 자식을 반환

1
2
3

$(document).ready(function(){
    $("div").children();
});

cs

다음 예제는 클래스 이름이 'first'인 모든 <p> 요소를 반환하며 <div>의 직접 하위 요소입니다.

1
2
3

$(document).ready(function(){
    $("div").children("p.first");
});

cs

find() - 선택된 요소의 자식들을 마지막 자식들까지 반환

1
2
3

$(document).ready(function(){
    $("div").find("span");
});

cs

출처:https://www.w3schools.com/jquery/

뚱선생