[jQuery] jQuery DOM 계층 구조를 활용한 셀렉터(Selector) 사용법

이전글

[jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법 

DOM 계층 구조를 활용한 셀렉터 사용법

DOM은 다음과 같이 트리 구조를 갖기 때문에 부모와 자식 조상과 후손으로 상대적인 계층 구조가 생성됩니다. 예를들어 H1의 부모는 BODY이고 형제로는 P가 있습니다. jQuery 선택자는 이러한 계층구조를 조건으로 하여 세밀한 DOM 탐색을 할 수 있도록 제공합니다.

실습 예제

body 구조는 다음과 같습니다.

자식(Child) 선택자

만약 body 태그 구성이 위와 같은 경우 body 의 자식중 b 태그를 선택하는 방법은 다음과 같이 '>' 를 사용하는 것입니다.

    <script>                                                                                 
        $(document).ready(function () { 
            var bTags = $('body > b'); 
            console.log(bTags);
        });
    </script> 

body의 자식중 b를 선택했기 때문에 span 하위의 네번째 b는 선택되지 않았습니다.

후손(Descendant) 선택자

이번에는 body의 후손 즉 자식과 그 자식의 후손까지 모든 범위에서 선택하는 방법입니다. 이때에는 선택자에서 띄어쓰기(공백)을 사용합니다.

    <script>                                                                                 
        $(document).ready(function () { 
            var bTags = $('body b'); 
            console.log(bTags);
        });
    </script> 

바로 하위의 b태그 및 span의 하위에 있는 b태그까지 선택된 모습니다.

 

부모 선택자 메서드

아쉽게도 CSS 선택자 형식으로는 부모를 선택할 수가 없습니다. 그러나 jQuery에서는 선택자 부모 메서드를 지원합니다.

예를 들어 위와 같은 구조일 때 네번째 b를 선택자로 시작하여 부모인 span을 잡고 싶은 경우에는 다음과 같이 parent() 선택자 메서드를 사용할 수 있습니다. 단 부모 요소인 span만이 선택되며 span의 형제들인 첫번째 ~ 세번째 b태그와 body, html 등은 선택도지 않습니다.

    <script>                                                                                 
        $(document).ready(function () { 
            var bTags = $('#four').parent(); 
            console.log(bTags);
        });
    </script> 

조상 선택자 메서드

만약 네번째 b를 기준으로 부모인 span 그리고 span의 부모인 body, 그리고 body의 부모인 html을 선택하려면 parents() 선택자 메서드를 사용합니다. 이경우에도 직계 부모들만을 선택하며 첫번째 ~ 세번째 b는 선택되지 않습니다.

    <script>                                                                                 
        $(document).ready(function () { 
            var bTags = $('#four').parents(); 
            console.log(bTags);
        });
    </script> 

네번째 b를 기준으로 첫번째 ~ 세번째 b 선택하는 방법

만약 네번째 b를 기준으로 첫번째 ~ 세번째 b, 즉 이모나 삼촌뻘(?) 되는 요소를 선택하고 싶은 경우는 parents() 선택자 메서드를 이용하는 방법인데, parents() 선택자 메서드에 매개변수를 주지 않은 경우 직계 조상들을 모두 선택하지만 매개변수를 주면 직계 부모 요소중 하나를 선택할 수 있습니다.

parents() 메서드와 children() 메서드를 응용합니다. 애초에 body를 기준으로 하면 되는 거 아니야? 라고 할 수 있지만 복잡한 구조의 HTML을 작성하다보면 상대적인 부모요소를 구해야 할 때가 있습니다. 그때 지금처럼 선택자 메서드를 응용한다면 매우 유용할 것입니다.

    <script>                                                                                 
        $(document).ready(function () { 
            var bTags = $('#four').parents('body').children('b'); 
            console.log(bTags);
        });
    </script> 

참고글

[jQuery] jQuery 선택자(Selector) 필터 목록 정리 

[jQuery] jQuery 선택자(Selector) 목록 정리