jQuery parent sibling children element 부모 형제 자식 요소 탐색

---

조상 요소의 탐색

트리 탐색(tree traversing) : 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정

조상(ancestor) 요소의 탐색
DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메서드

• .parent() : 선택한 요소의 부모(parent) 요소를 선택
  • 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택 가능
• .css() : 선택한 요소에 인수로 전달받은 스타일을 설정

$(function() {
    $("button").on("click", function() {
        $("p").parent()                        // <p>요소의 부모 요소를 선택함.
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경
    });
});

• .parentsUntil() : 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택
• 이때 선택자를 인수로 전달하지 않으면, .parent() 메서드와 같이 선택한 요소의 조상 요소를 모두 선택

$(function() {
    $("button").on("click", function() {
        // <p>요소의 조상 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택함.
        $("p").parentsUntil("div")
            .css({"border": "2px solid red"});    // 해당 요소의 CSS 스타일을 변경
    });
});

• .closest() : 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택
• 이 메서드가 요소의 집합을 구하는 방식은 .parents() 메서드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다름

$(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"});
    });
});

형제(sibling) 요소의 탐색

DOM 트리에서 특정 요소의 형제(sibling) 요소를 탐색

• .siblings() : 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택
• .next() : 선택한 요소의 바로 다음에 위치한 형제 요소를 선택
• .nextAll() : 선택한 요소의 다음에 위치한 형제 요소를 모두 선택
  • 이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만을 선택 가능
• .nextUntil() : 선택한 요소의 형제 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택
  • 이때 선택자를 인수로 전달하지 않으면, .nextAll() 메서드와 같이 선택한 요소의 다음에 위치한 형제 요소를 모두 선택
• .prev(), .prevAll(), .prevUntil()
  • 이 메서드들은 각각 .next(), .nextAll(), .nextUntil() 메서드와 정반대로 동작하여 요소들을 선택

$(function() {
    $("button").on("click", function() {
        $("h4").siblings()                 // <h4>요소의 형제 요소를 모두 선택함.
        .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경
    });
});

$(function() {
    $("button").on("click", function() {
        $("h4").next()                     // <h4>요소의 바로 다음 형제 요소를 선택함.
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경
    });
});

$(function() {
    $("button").on("click", function() {
        $("h4").nextAll()                  // <h4>요소의 다음에 있는 형제 요소를 모두 선택함.
        .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경
    });
});

$(function() {
    $("button").on("click", function() {
        // <h4>요소의 형제 요소 중에서 첫 번째 <p>요소의 바로 이전까지의 모든 요소를 선택함.
        $("h4").nextUntil("p")
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경
    });
});

자손(descendant) 요소의 탐색

DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메서드

• .children() : 선택한 요소의 자식(child) 요소를 모두 선택
  • 이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있습니다.
• .find() : 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택
  • 이때 별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있습니다.

$(function() {
    $("button").on("click", function() {
        $("ul").children()                         // <ul>요소의 자식 요소를 모두 선택함.
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경
    });
});

$(function() {
    $("button").on("click", function() {
        $("li").find("*")                            // 각 <li>요소의 자손 요소을 모두 선택함.
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경
    });
});

Reference

https://www.tcpschool.com/jquery/jq_elementTraversing_AncestorTraversing

코딩교육 티씨피스쿨

https://www.tcpschool.com/jquery/jq_elementTraversing_SiblingTraversing

코딩교육 티씨피스쿨

https://www.tcpschool.com/jquery/jq_elementTraversing_descendantsTraversing

코딩교육 티씨피스쿨