[jQuery] jQuery DOM 계층 구조를 이용한 선택자 메서드

이전글

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

DOM 계층 구조를 이용한 선택자 메서드

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

실습 예제

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

자식(Child) 선택자 메서드

만약 body 태그 구성이 위와 같은 경우 body 의 자식 요소들(children) 을 선택할때에는 children() 메서드를 사용합니다.

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

네번째 b 태그는 body의 자식이 아니기 때문에 선택되지 않았습니다.

만약 body를 기준으로 네번째 b 요소를 찾아갈때에는 children(CSS 선택자) 메서드에 대상 요소를 지정하여 원하는 자식 요소만 선택하는 식으료 사용하면 됩니다.

<script>                                                                                 
    $(document).ready(function () { 
        var children = $('body').children('span').children('b').text(); 
        console.log(children); //네번째
    });
</script> 

특정 요소 하위의 모든 요소 선택하기

자식 요소들 뿐만 아니라 자식의 자손들까지 모든 요소를 선택하거나 그 범위 안에서 요소를 선택하는 경우에는 find(CSS 선택자) 메서드를 사용할 수 있습니다.

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

바로 하위의 b태그 및 span, 그리고 그 하위의 b태그까지 선택된 모습입니다.

형제 선택자 메서드

처음에 사용했던 예제를 다시 들고 왔습니다. 이번에는 span 요소를 기준으로 형제인 첫번째 ~ 세번째 b 요소를 선택하는 방법입니다.

형제요소를 선택하려면 siblings() 메서드를 사용합니다.

<script>                                                                                 
    $(document).ready(function () { 
        var children = $('span').siblings(); 
        console.log(children);
    });
</script> 

형제들(?)이 선택되었습니다.

다른 선택자 메서드와 마찬가지로 형제들 중 특정 요소만을 선택할 수도 있습니다.

var children = $('span').siblings('b:eq(0)'); //첫번째 b 요소                             

부모 선택자 메서드

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) 필터 총정리

[jQuery] jQuery DOM 계층 구조를 이용한 선택자 메서드