본문 바로가기
프로그램&DB/jQuery&JS

[jQuery강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2) by 승연아빠님

Josep.H.S 2011. 8. 8. 23:46
웹 프런티어와 함께하는 jQuery 기초강좌
6th - DOM 계층(Hierarchy)을 이용한 요소 접근(2)

이전 시간에 알아본 HTML DOM을 jQuery에서 지원하는 DOM 접근 방법에 대해 알아 보도록 하겠습니다.

jQuery 계층 접근 셀렉터의 종류
jQuery에서는 다음과 같이 4개의 계층 접근용 셀렉터를 지원하고 있으며, 각각의 사용법에 대해서는 간단한 예제와 함께 알아 보도록 하겠습니다.

 형식(셀렉터)

 셀렉터 표현식

 Child Selector

 $(“parent > child”)

 Descendant Selector

 $(“ancestor descendant”)

 Next Adjacent Selector

 $(“prev + next”)

Next Siblings Selector

 $(“prev ~ siblings”)

표 1. [jQuery 계층(Hierarchy) 셀렉터의 종류]




Child Selector : $(“Parent > Child”)

부모(Parent) 요소 바로 아래 자식(Child)인 요소를 반환 합니다.
최근에 출시된 대부분의 브라우저를 지원하고 있으나, IE6를 포함한 이전의 브라우저에서는 지원을 하고 있지 않으니 사용에 각별한 주의가 필요합니다. IE6를 포함한 이전의 브라우저의 지원을 위해서는 3번째 강좌에서 설명한 기본 셀렉터를 사용 하시기 바랍니다. 기본 셀렉터의 경우 모든 브라우저를 지원하고 있으므로 브라우저의 버전이나, 종류에 신경 쓸 필요가 없습니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>
        div { background-color:#EEEEEE; padding:10px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("ul.siteUrl > li").css("border", "1px solid #ff0000");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul class="siteUrl">
            <li>Sqler : http://www.sqler.com</li>
            <li>jQuery : http://jquery.com</li>
            <li>
                <ul>
                    <li>Blog : http://www.hows.kr</li>
                    <li>Community : http://www.hoons.kr</li>
                </ul>
            </li>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
        </ul>
    </div>
</body>
</html>
[부모요소(ul)에서 자식요소(li)과 일치하는 항목 선택]


05_002.jpg
[부모요소(ul)에서 자식요소(li)과 일치하는 항목 선택된 모습]

$("ul.siteUrl > li").css("border", "1px solid #ff0000"); 코드설명
1. HTML 문서에서 ul 요소 중 “siteUrl”이란 클래스 명을 가진 요소를 찾습니다.
2. 1번 항목에서 찾은 요소의 자식 중에 “li” 항목과 일치하는 요소를 찾습니다.
3. 2번 항목에서 찾은 요소를 jQuery의 “css” 메소드를 이용해 테두리 값을 빨강색으로 변경합니다.



Descendant Selector : $(“ancestor descendant”)
조상(Ancestor)과 일치하는 요소에 포함된 모든 후손(Descendant)중에 후손의 요소와 일치하는 모든 항목을 반환합니다. 부모(Parent)와 자식(Child)간의 관계가 조상(Ancestor)과 후손(Descendant)로 변경이 되었을 뿐 Child 셀렉터와 동일한 기능을 제공 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>div { background-color:#EEEEEE; padding:10px; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#siteUrl1 > li").css("border", "1px solid #ff0000");
            $("#siteUrl2 li").css("border", "1px solid blue");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul id="siteUrl1">
            <li>Sqler : http://www.sqler.com</li>
            <li>jQuery : http://jquery.com</li>
            <li>
                <ul>
                    <li>Blog : http://www.hows.kr</li>
                    <li>Community : http://www.hoons.kr</li>
                </ul>
            </li>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
        </ul>
        <ul id="siteUrl2">
            <li>Sqler : http://www.sqler.com</li>
            <li>jQuery : http://jquery.com</li>
            <li>
                <ul>
                    <li>Blog : http://www.hows.kr</li>
                    <li>Community : http://www.hoons.kr</li>
                </ul>
            </li>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
        </ul>
    </div>
</body>
</html>
[자식(Child) 셀렉터와 후손(Descendant) 셀렉터]

 
05_003.jpg
[자식(Child) 셀렉터와 후손(Descendant) 셀렉터에 의해 선택 된 모습]

빨강색으로 표시된 부분은 자식(Child) 셀렉터를 이용하여 개체를 선택한 모습이며, 파랑 색으로 표시된 부분은 후손(Descendant) 셀렉터에 의해 개체를 선택한 모습입니다.
자식(Child) 셀렉터를 이용했을 경우 ul -> li -> ul -> li 에 해당되는 요소는 선택이 되지 않고 바로 아래에 있는 자식(Child) 요소만 선택이 된 반면에 후손(Descendant) 셀렉터를 이용했을 경우 li에 해당하는 모든 요소를 선택 한 것을 확인 할 수 있습니다. 
간단한 문법의 차이로 인해서 반환하는 요소의 결과의 차이가 많으니 두 가지 셀렉터의 차이점을 확실히 이해를 하시는 것은 매우 중요합니다.



Next Adjacent Selector : $(“prev + next”)
이전에는 요소와 요소 사이의 상, 하 관계를 통해 일치하는 항목을 찾았다면 이번 셀렉터와 다음에 설명드릴 셀렉터는 평행관계를 통해 일치하는 요소를 반환합니다.
Prev 요소 바로 다음에 나오는 형제(Adjacent) 수준의 next 요소와 일치하는 항목을 반환합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>
        div { background-color:#EEEEEE; padding:10px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("label + input").css("border", "1px solid #ff0000");
        });
    </script>
</head>
<body>
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <form>
            <label>Name:</label>
            <input name="name" />
        
            <fieldset>
                <label>Newsletter:</label>
                <input name="newsletter" />
            </fieldset>

        </form>
        <input name="none" />
    </div>
</body>
</html>
[label 다음의 input의 요소와 형제 수준이 동일한 요소를 찾습니다.]

 
05_004.jpg
[지정한 요소와 형제 수준이 동일한 요소의 모습]

$("label + input").css("border", "1px solid #ff0000");
<label> 요소 바로 다음(형제요소)에 있는 <input> 요소를 찾습니다. 동일한 패턴으로 된 모든 요소를 찾아 반환합니다. 
$(“label > input”) 부분과 혼동하시는 분들이 많아 두 셀렉터의 차이를 다시 설명하자면 $(“label > input”)의 경우 <label>을 부모로 가지고 있는 <input> 요소를 찾는 것이고, $(“label + input”)의 경우는 <label>과 평등한 관계에 있는 <input>요소를 찾는 것 입니다.



Next Siblings Selector : $(“prev ~ siblings”)
Prev 요소 이후에 형제 요소 중 siblings와 동일한 요소를 반환합니다.
$(“#prev ~ div”)의 경우 id의 값이 prev인 요소를 찾고 해당 요소를 제외한 다음 형제 요소 중에 div와 동일한 요소를 찾아 반환을 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <style>
        div,span  
        {
            width:100px; 
            height:80px; 
            float:left; 
            padding:10px; 
            margin:10px; 
            background-color:#EEEEEE; 
        }
        div#small 
        {
            width:60px;
            height:20px;
            font-size:12px;
            background:#fab;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#prev ~ div").css("border", "3px groove blue");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p id="content">jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>        
    <div>div (doesn't match since before #prev)</div>
    <span id="prev">span#prev</span>
    <div>div sibling</div>
    <div>div sibling 
        <div id="small">div niece</div>
    </div>
    <span>span sibling (not div)</span>
    <div>div sibling</div>
</body>
</html>
[자신을 제외한 이후 형제 요소 선택]

 
05_005.jpg
[자신을 제외한 동일한 형제 요소에 속하는 div 요소를 선택한 모습]

이번 시간에는 DOM 계층을 이용한 접근 방법에 대해 알아 보았습니다. 동적인 화면의 구성과 복잡한 UI에서 원하는 요소(개체)에 접근하기 위해서는 DOM의 구조에 대해 이해하고 접근방법에 익숙해 있어야 합니다.


jQuery 시리즈 강좌 리스트

[jQuery강좌] 1. 웹 개발자를 위한 jQuery 기본이해
[jQuery강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1)
[jQuery강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2)
[jQuery강좌] 4. jQuery Selector - 속성(Attribute)
[jQuery강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1)
[jQuery강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2)
[jQuery강좌] 7. jQuery Filter - 기본필터(Basic Filter)
[jQuery강좌] 8. jQuery Filter - 폼 필터(Form Filter)
[jQuery강좌] 9. jQuery Filter - 자식필터(Child Filter)
[jQuery강좌] 10. jQuery Traverse - Filtering
[jQuery강좌] 11. jQuery Traverse - Miscellaneous Traversing
[jQuery강좌] 12. jQuery Traverse - Tree Traversal
[jQuery강좌] 13. jQuery Core
[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여
[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드
[jQuery강좌] 18. jQuery Event - bind() 메서드
[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~
[jQuery강좌] 20. jQuery Performance


jQuery 시리즈 동영상 강좌 리스트

[jQuery 동영상 강좌] 1. 웹 개발자를 위한 jQuery 기본이해
[jQuery 동영상 강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1)
[jQuery 동영상 강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2)
[jQuery 동영상 강좌] 4. jQuery Selector - 속성(Attribute)
[jQuery 동영상 강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1)
[jQuery 동영상 강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2)
[jQuery 동영상 강좌] 7. jQuery Filter - 기본필터(Basic Filter)
[jQuery 동영상 강좌] 8. jQuery Filter - 폼 필터(Form Filter)
[jQuery 동영상 강좌] 9. jQuery Filter - 자식필터(Child Filter)
[jQuery 동영상 강좌] 10. jQuery Traverse - Filtering
[jQuery 동영상 강좌] 11. jQuery Traverse - Miscellaneous Traversing
[jQuery 동영상 강좌] 12. jQuery Traverse - Tree Traversal
[jQuery 동영상 강좌] 13. jQuery Core
[jQuery 동영상 강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여
[jQuery 동영상 강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여
[jQuery 동영상 강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여
[jQuery 동영상 강좌] 17. jQuery Event - 이벤트 지원 메서드
[jQuery 동영상 강좌] 18. jQuery Event - bind() 메서드
[jQuery 동영상 강좌] 19. jQuery Event - 이벤트에 생명을~
[jQuery 동영상 강좌] 20. jQuery Performance


 [출처] SQLER.COM http://www.sqler.com/387425


참고자료 및 참고링크
jQuery Hierarchy Selector (예제참조)
http://api.jquery.com/category/selectors/hierarchy-selectors/

관련읽을거리
DOM(Document Object Model)
http://www.w3.org/DOM

감사합니다.
승연아빠(io2tree@live.com)
HoonsNET ASP.NET Sysop
ASP.NET MVP

'프로그램&DB > jQuery&JS' 카테고리의 다른 글

[jQuery강좌] 8. jQuery Filter - 폼 필터(Form Filter) by 승연아빠님  (0) 2011.08.08
[jQuery강좌] 7. jQuery Filter - 기본필터(Basic Filter) by 승연아빠님  (0) 2011.08.08
[jQuery강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1) by 승연아빠님  (0) 2011.08.08
[jQuery강좌] 4. jQuery Selector - 속성(Attribute) by 승연아빠님  (0) 2011.08.08
[jQuery강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2) by 승연아빠님  (0) 2011.08.08

'프로그램&DB/jQuery&JS' Related Articles

티스토리툴바