부모와 자식
DOM 내에서도 부모 자식 관계가 존재하고, 이런 관계를 이용해 원하는 요소를 얻어오기도 한다.
<li>는<b>의 부모(parent)이고 반대로<b>는<li>의 자식(child)이다.<div>는<b>의 조상(ancestor)이고 반대로<b>는<div>의 후손(descendant)이다.<li>간에는 형제(siblings) 관계 이다.
✨ 부모 찾기
$(selector)perent();: 선택한 요소의 바로 위의 요소를 선택 (=부모를 선택)$(selector).perents(selector): 선택한 요소의 상위 요소들 중 두 번째 selector의 요소들을 모두 선택 (= 조상들)$(selector1).perentsUntil(selector2): 선택한 요소와 지정한 요소 사이의 부모를 모두 선택 (셀렉터 1과 셀렉터 2 사이에 요소를 가져온다.)
❕perents 와 perentsUntil 은 매개변수를 지정하지 않으면 html 까지 조상으로 올라간다.
$(selector).closest(selector);: 선택한 요소로부터 부모 요소들을 탐색해서, 가장 먼저 발견한 요소를 반환한다.
아래 코드와 화면 예시를 보면 자식과 부모, 조부모의 관계를 명확히 확인할 수 있다.
<body>
<div class="ancestors">
<div>div(grant-grandparent : span 태그의 조상)
<ul>ul(grandparent : span 태그의 조부모)
<li>li(perent : span 태그의 부모)
<span>span</span>
</li>
</ul>
</div>
<div> div(grandparent : span 태그의 조부모)
<p>p(perent: span 태그의 부모)
<span>span</span>
</p>
</div>
</div>
</body>
✔ 이렇게 부모 자식 관계를 설정해주었다면, 원하는 부모 또는 조상에게만 스타일을 지정하는 코드를 살펴보자
$('span').parent().css({'border' : '2px solid red'}); : span 의 바로 위 부모를 가져온다.
$('span').parents('div').css({'border' : '2px solid red'}); : 조상 중 모든 div를 가져온다.
$('span').parentsUntil('.ancestors').css({'border' : '5px solid red'}); : span 과 .ancestors(첫 번째 div 요소) 사이에 있는 요소들을 가져온다.
$('span').closest('div').css({'border' : '2px solid red'}); : html 까지 올라가면서 요청한 최초의 요소를 가져온다.
✨ 자식 찾기
부모는 부모, 조부모, 조상 등등 여러명이 있을 수 있지만 자식은 부모보다 선택지가 좁기 때문에 2가지 방법으로 찾을 수 있다.
$(selector).children();: 선택한 요소의 바로 아래의 요소를 선택$(selector).find(selector);: 선택한 요소의 하위 요소들 중에서 검색하여 찾는다.
$('.ancestors').children().css({'border' : '5px solid red'}); : .ancestors 의 자식 요소를 가져온다.
$('.ancestors').find('span').css({'border' : '5px solid red'}); : .ancestors 의 자식 요소 중 span 을 가져온다.
✨ 형제 찾기
형제는 next(down/다음)와 prev(up/이전), siblings(아무것도 입력 안하면 모든 형제를 가져온다.) 만 알면 된다.
형제를 어떻게 찾는지를 알기 위해 html 문서를 일단 작성해보자
<body>
<div>
<p>ELEMENT 1</p>
<span>ELEMENT 2</span>
<span>ELEMENT 3</span>
<span>ELEMENT 4</span>
<h3>ELEMENT 5</h3>
<h4>ELEMENT 6</h4>
<h5>ELEMENT 7</h5>
<h6>ELEMENT 8</h6>
<p>ELEMENT 9</p>
</div>
</body>-
siblings(): 나를 제외한 동일 선상의 요소를 가져온다
() 안에 매개변수를 지정할 경우 동일 선상의 해당 요소만 가져온다.
$('h3').siblings().css({'border-color' : 'red'});: 나를 제외한 동일 선상의 요소를 가져온다.
$('h3').siblings('span').css({'border-color' : 'red'});: 동일 선상의 span 만 가져온다. -
next(): 다음 요소(아래)를 가져온다
$('h3').next().css({'border-color' : 'red'});: h3의 아래 요소를 가져옴 -
prev(): 이전 요소(위)를 가져온다
$('h3').prev().css({'border-color' : 'red'});: h3의 의 위 요소를 가져옴
next와 prev 처럼 하나씩만 가져오는 경우에는 셀렉터를 사용해주지 않는다.
-
nextAll(selector): next 방향으로 끝까지 이동하면서 특정 요소만 가져온다.
$('h3').nextAll('p').css({'border-color' : 'blue'});: h3 태그의 아래에서 p 태그만 가져온다. -
prevAll(selector): prev 방향으로 끝까지 이동하면서 특정 요소만 가져온다.
$('h3').prevAll('span').css({'border-color' : 'red'});: h3 태그의 위에서 span 태그만 가져온다.
-
nextUntil(selector): 첫 번째 셀렉터와 두 번째 셀럭터 사이요소 가져오기(next 방향)
$('h3').nextUntil('p').css({'border-color' : 'blue'});: h3 태그와 p 태그 사이 요소를 next(아래) 방향으로 가져온다. -
prevUntil(selector): 첫 번째 셀렉터와 두 번째 셀럭터 사이요소 가져오기(prev 방향)
$('h3').prevUntil('p').css({'border-color' : 'red'});: h3 태그와 p 태가 사이 요소를 prev(위) 방향으로 가져온다.
✨ 필터링 (Filtering)
$(selector).first(): 선택한 요소들 중 첫 번째 요소 선택 (인덱스 0번)$(selector).last(): 선택한 요소들 중 마지막 요소 선택 (마지막 인덱스 -1)$(selector).eq(num): 선택한 요소들 중 n번째(배열개념) 요소 선택 (특정 인덱스 가져오기)$(selector).filter(selector): 선택한 요소들 중 지정한 요소 선택$(selector).not(selector): 선택한 요소들 중 지정한 요소만 빼고 선택
배열은 보통 인덱스 기반으로 0부터 시작하지만 간혹 1부터 시작하는 경우도 있기 때문에 확인하고 사요해주는 것이 좋다.
필터링을 확인하기 위한 html 코드를 먼저 작성해보자
<body>
<div>
<p>1번째 요소</p>
<p class="sel">2번째 요소</p>
<p>3번째 요소</p>
<p class="sel">4번째 요소</p>
</div>
<div>
<p>5번째 요소</p>
<p class="sel">6번째 요소</p>
<p>7번째 요소</p>
<p class="sel">8번째 요소</p>
</div>
</body>배열 개념
$('div p').first().css({'background-color' : 'pink'}); : div 자식 요소 중 p 태그의 첫 번째 요소만 가져오기
$('div p').last().css({'background-color' : 'skyblue'}); : div 자식 요소 중 p 태그의 마지막 요소만 가져오기
$('div p').eq(2).css({'background-color' : 'plum'}); : div 자식 요소 중 p 태그의 2번 인덱스 요소 가져오기 (=3번째)
필터 개념
$('p').filter('.sel').css({'border' : '5px solid red'}); : p 태그 중 class가 sel 인 요소를 가져온다.
$('p').not('.sel').css({'border' : '5px solid blue'}); : p 태그 중 class가 sel이 아닌 요소를 가져온다.
