여행을 개발하다
선택자 2 - 기본 선택자 (인접관계 선택자) 본문
안녕하세요.
오늘은 지난 포스팅인 '기본 선택자(직접 선택자)'에 이어,
기본 선택자, 그 중에서도 '인접관계 선택자'에 대해 포스팅하고자 합니다.
직접 선택자가 말 그대로 HTML 요소를 직접 가져온다면,
인접관계 선택자는 선택한 요소의 인접 요소들을 가져오는 기능을 합니다.
여기서 인접 요소들이란 부모, 형제, 자식 요소 등을 포함합니다.
하지만 부모, 형제, 자식 요소들에 대해 개념이 생소하신 분들이 있을 것 같아
간단하게 부모, 형제, 자손 요소에 대해 짚고 넘어가도록 하겠습니다.
1. 부모, 자식, 형제 요소의 이해
부모, 자식, 형제 요소라고 해서 거창한 개념은 아닙니다.
그저 저희가 친족들 간에 쓰던 호칭을 HTML 요소에 직접 적용한 것이기 때문이에요.
일반적으로 가계도는 다음과 같이 그릴 수 있죠.
조부모는 할아버지, 할머니, 부모님은 아버지, 어머니, 그리고 자식은 본인을 포함한 형제 자매가 됩니다.
이를 HTML의 요소 세계에도 그대로 적용한 것이 부모, 형제, 자식 요소입니다.
조금 이상하지만 다음과 같은 코드가 있다고 가정하죠.
<div>
<p>
<input type="text">
<input type="text">
</p>
</div>가독성을 위해 tab 간격을 조금씩 줬습니다.
이럴 경우 <div> 태그 내에 포함된 요소들 간의 관계는 다음과 같습니다.
최상의 <div> 태그 밑에는 <p>, 그 밑에는 2개의 <input> 박스가 존재합니다.
이 코드에서 <div> 태그와 <p>태그, <p> 태그와 <input> 태그는 서로 부모와 자식 요소 관계가 됩니다.
여기서 한 단계 더 들어가면, 두개의 <input> 태그는 서로 형제 요소 관계가 되는 것입니다.
이를 다시 가계도로 그려보면 이렇게 되겠네요.
주의하실 점은 <div> 태그가 <input> 태그의 조부모 요소가 되는 것은 아닙니다.
부모-자식 요소의 관계가 성립하는 scope는 한 세대의 '부모-자식' 요소 관계까지 입니다.
여기까지라면 얼추 부모, 자식, 형제 요소에 대한 대략적인 개념이 잡히시나요?
그럼 본론으로 들어가겠습니다.
2. 인접 관계 선택자의 종류
인접 관계 선택자는 다음과 같은 종류가 있습니다.
상당히 많죠?
그럼 인접 관계 선택자는 어떻게 사용되는지, 예제를 통해 함께 알아보겠습니다.
|
순번 |
선택자 종류 |
설명 |
사용법 |
|
1 |
부모 요소 선택자 |
선택한 요소의 부모 요소를 선택합니다. |
$("요소").parent() |
|
2 |
상위 요소 선택자 |
선택한 요소의 상위 요소를 선택합니다. 여기서 상위 요소란, 부모 및 그보다 더 상위에 있는 요소들을 말합니다. |
$("요소").parents() |
|
3 |
자식 요소 선택자 |
선택한 "요소" 아래의 지정한 "자식 요소"를 선택합니다. |
$("요소" > "자식요소") |
|
4 |
자식 요소들 선택자 |
선택한 요소의 모든 자식 요소를 선택합니다. |
$("요소").children() |
|
5 |
가장 근접한 상위 요소 선택자 |
선택한 요소의 상위 요소 중, 가장 가까운 "요소1"을 선택합니다. |
$("요소").closest("요소1") |
|
6 |
이전 요소 선택자 |
선택한 요소의 이전 요소를 선택합니다. 형제 관계에만 사용되므로, 형 요소 선택자라고도 합니다. |
$("요소").prev() |
|
7 |
이전 요소들 선택자 |
선택한 요소 이전의 모든 요소를 선택합니다. |
$("요소").prevAll() |
|
8 |
다음 요소 선택자 |
선택한 요소의 다음 요소를 선택합니다. 형제 관계에만 사용되므로, 동생 요소 선택자라고도 합니다. |
$("요소").next() |
|
9 |
다음 요소들 선택자 |
선택한 요소의 다음 요소를 모두 선택합니다. |
$("요소").nextAll() |
|
10 |
지정 이전 요소들 선택자 |
지정한 요소 이전 요소부터 "선택자"로 지정한 이전 요소까지 선택합니다. |
$("요소").prevUntil("선택자") |
|
11 |
지정 다음 요소들 선택자 |
지정한 요소 다음 요소부터 "선택자"로 지정한 요소 이전까지 선택합니다. |
$("요소").nextUntil("선택자") |
|
12 |
전체 형제 요소들 선택자 |
지정한 요소의 형제 요소들을 선택합니다. |
$("요소").siblings() |
3. 예제
* 소스 준비 *
예제 연습을 위해 기본 소스를 준비합니다. 구성은 다음과 같습니다.
① 주 사용 태그는 목록 태그인 <ul>, <li>입니다.
② 'temp_main'이라는 클래스를 사용하는 <ul> 태그는 <ul.temp_sub1>, <ul.temp_sub2>의 자식 요소를 가집니다.
③ 또한, <ul.temp_sub1>, <ul.temp_sub2> 요소는 각각 4개, 5개의 자식 요소를 갖습니다.
④ 모든 부모, 자식 요소는 클래스 선택자를 사용하여 컨트롤 하겠습니다. ( $(".~~~") )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>selectors_tragramming</title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
});
</script>
<body>
<ul class="temp_main">
<ul class="temp_sub1">
<li class="temp1">인접선택자1</li>
<li class="temp2">인접선택자2</li>
<li class="temp3">인접선택자3</li>
<li class="temp4">인접선택자4</li>
</ul>
<ul class="temp_sub2">
<li class="temp5">인접선택자5</li>
<li class="temp6">인접선택자6</li>
<li class="temp7">인접선택자7</li>
<li class="temp8">인접선택자8</li>
<li class="temp9">인접선택자9</li>
</ul>
</ul>
</body>
</html>3-1. 부모 요소 선택자
선택한 요소의 부모 요소를 가지고 오며, 사용법은 다음과 같습니다.
$("선택자").parent()예를 들어, 'temp3'이라는 클래스를 사용하는 <li> 태그의 부모요소인 <ul.temp_sub1> 태그에 색깔을 넣어볼께요.
$(".temp3").parent().css("color", "blue");
그러자 해당 요소에 파란색이 입혀졌습니다.
엇, 그런데 왜 모든 형제 요소까지 전부 적용이 됐냐구요?
그 이유는 css의 color 속성은 부모의 속성이 자식 요소까지 모두 상속되기 때문입니다.
이점 참고해주세요.
3-2. 상위 요소 선택자
선택한 요소의 상위 요소를 가지고 오며, 사용법은 다음과 같습니다.
$("선택자").parents()예를 들어, 'temp5'이라는 클래스를 사용하는 <li> 태그의 모든 상위 요소에 초록색을 입혀볼께요.
여기서 상위 요소란, 부모 요소를 포함한 상위 객체를 말합니다.
결국 'temp5'이라는 클래스를 사용하는 <li> 태그의 상위요소는 <ul.temp_sub2>, <ul.temp_main>를 포함합니다.
$(".temp5").parents().css("color", "green")
그러자 해당 요소에 초록색이 입혀졌습니다. 전체가 초록색으로 변한 이유는 위에서 언급한 것과 동일합니다.
<ul.temp_main> 요소의 color 속성이 자식 요소들에게까지 모두 상속되었기 때문입니다.
3-3. 자식 요소 선택자
선택한 요소의 자식 요소를 가지고 오며, 사용법은 다음과 같습니다.
$("요소" > "자식요소")'temp_sub1'이라는 클래스를 사용하는 <ul> 태그의 자식 중, 'temp1'이라는 클래스를 사용하는 <li> 태그만 선택하겠습니다.
그리고 배경색을 노란색으로 지정해줍니다.
$(".temp_sub1 > .temp1").css("background-color", "yellow");코드를 실행하니, 'temp1' 클래스를 사용하는 <li> 태그에만 노란색 배경이 적용되었습니다.
3-4. 자식 요소들 선택자
선택한 요소의 모든 자식 요소들을 가지고 오거나, 특정 자식 요소만 선택해서 가지고 올 때 사용합니다.
$("요소").children()
$("요소").children("자식 요소명")다음의 첫 번째 코드는, 'temp_sub1'이라는 클래스를 사용하는 <ul> 태그의 모든 자식 요소를 가지고 오는 것이며,
두 번째 코드는, 'temp_sub1'이라는 클래스를 사용하는 <ul> 태그의 자식 요소 중, 'temp3'라는 클래스를 사용하는 요소만 가지고 옵니다.
$(".temp_sub1").children().css("background-color", "yellow");
$(".temp_sub1").children(".temp3").css("background-color", "yellow");각각의 코드를 실행한 결과입니다.
3-5. 가장 근접한 상위 요소 선택자
선택한 요소의 상위 요소 중, 지정한 "요소1"에 해당하는 상위 요소만을 가져옵니다.
사용법은 요소를 선택하고, closest의 인수에 접근하고자 하는 상위요소 "요소1"을 적어줍니다.
$("요소").closest("요소1")'temp1'이라는 클래스를 사용하는 <li> 태그의 상위 요소 중, 'temp_main'이라는 클래스를 사용하는 <ul> 태그에 노란색 배경을 지정해보겠습니다.
$(".temp1").closest("ul.temp_main").css("background-color", "yellow");
이제는 가장 근접한 상위 요소를 부모 요소로 설정하여 배경색을 회색으로 바꾸어 볼께요.
$(".temp1").closest("ul.temp_sub1").css("background-color", "gray");
3-6. 이전 요소 선택자
선택한 요소의 이전 요소를 선택합니다.
여기서의 이전 요소는 '부모-자식'간에는 성립하지 않는다는 것에 주의하세요. 오직 형제 요소 간에만 성립합니다.
누가 형이냐 동생이냐는 순서에 의해 정해지므로, 이전 요소 선택자는 '형 요소 선택자'라고도 합니다.
$("요소").prev()먼저 성립하지 않는 case입니다.
<ul class="temp_main">
<ul class="temp_sub1">
<li class="temp1">인접선택자1</li>
<li class="temp2">인접선택자2</li>
<li class="temp3">인접선택자3</li>
<li class="temp4">인접선택자4</li>
</ul>
<ul class="temp_sub2">
<li class="temp5">인접선택자5</li>
<li class="temp6">인접선택자6</li>
<li class="temp7">인접선택자7</li>
<li class="temp8">인접선택자8</li>
<li class="temp9">인접선택자9</li>
</ul>
</ul>$(".temp1").prev().css("background-color", "yellow")'temp1'이라는 클래스를 사용하는 <li> 태그의 형 요소는 없을 뿐더러, 이전 요소라고 해봤자 부모 요소인 <ul.temp_sub1> 밖에 없습니다. 실행 결과는 예상대로 아무 반응이 없습니다.
그래서 'temp3'이라는 클래스를 사용하는 <ul> 태그 이전 요소인, <li.temp2>에 배경색을 입혀보겠습니다.
$(".temp3").prev().css("background-color", "yellow")
이제는 제대로 실행이 되네요.
3-7. 이전 요소들 선택자
선택한 요소의 이전 요소들을 선택합니다.
이전 요소 선택자는 단 한 개의 이전 요소만 선택했습니다.
하지만 이전 요소들 선택자는 같은 형제 요소이기만 하면, 이전 요소들을 모두 선택합니다.
역시 부모 요소를 뛰어넘는 scope에는 적용되지 못하며, 형제 요소들끼리만 유효하다는 것에 주의하세요.
$("요소").prevAll()'temp9'라는 클래스를 사용하는 <li> 태그의 이전 요소들의 배경색을 모두 노란색으로 변경합니다.
$(".temp9").prevAll().css("background-color", "yellow");다음의 부모-자식 요소들 중,
<ul class="temp_sub2">
<li class="temp5">인접선택자5</li>
<li class="temp6">인접선택자6</li>
<li class="temp7">인접선택자7</li>
<li class="temp8">인접선택자8</li>
<li class="temp9">인접선택자9</li>
</ul>적용되는 타겟을 추리면 다음 4개가 되겠네요.
<li class="temp5">인접선택자5</li>
<li class="temp6">인접선택자6</li>
<li class="temp7">인접선택자7</li>
<li class="temp8">인접선택자8</li>실행 결과 인접선택자5, 6, 7, 8에만 잘 적용되었습니다.
3-8. 다음 요소 선택자
선택한 요소의 다음 요소들을 선택합니다.
이전 요소, 이전 요소들 선택자와 선택 방향만 다를 뿐 기능이 거의 동일합니다.
이전 요소 선택자가 형 요소 선택자였다면, 다음 요소 선택자는 동생 요소 선택자입니다.
역시 부모 요소를 뛰어넘는 scope에는 적용되지 못하며, 형제 요소들끼리만 유효합니다.
$("요소").next()'temp1'이라는 클래스를 사용하는 <li> 태그의 다음 요소를 선택하여, 노란색 배경을 적용해줍니다.
$(".temp1").next().css("background-color", "yellow");
'temp1' 클래스를 사용하는 <li> 태그의 다음 요소 선택자인 '인접선택자2'에만 노란색 배경이 적용되었습니다.
3-9. 다음 요소들 선택자
선택한 요소의 다음 요소들을 선택합니다.
역시 부모 요소를 뛰어넘는 scope에는 적용되지 못하며, 형제 요소들끼리만 유효합니다.
$("요소").nextAll()'temp1'이라는 클래스를 사용하는 <li> 태그의 다음 요소들을 선택하여, 노란색 배경을 적용해줍니다.
$(".temp1").nextAll().css("background-color", "yellow");
3-10. 지정 이전 요소들 선택자
선택한 요소의 이전 요소부터, prevUntil의 인수로 사용한 요소의 다음 요소까지 선택합니다.
prevUntil의 인수를 지정하지 않으면, 선택한 요소의 이전 요소들을 모두 선택합니다.
여기서 선택한 요소의 이전 요소들이란, 같은 부모 요소 아래에 있는 형제 요소들입니다.
$("요소").prevUntil("선택자")
제가 설명해도 말이 너무 어렵습니다. 그래서 그림으로 그려보려 합니다.
<ul class="temp_sub1">
<li class="temp1">인접선택자1</li>
<li class="temp2">인접선택자2</li>
<li class="temp3">인접선택자3</li>
<li class="temp4">인접선택자4</li>
</ul>.temp4에서 temp1 이전까지 선택한다는 코드를 짜보면 일단 다음과 같아요.
$(".temp4").prevUntil(".temp1")쉽게 풀어보면, "temp1"과 "temp4" 사이에 있는 것들만 적용 범위가 됩니다.
이제 저기에 배경색을 지정해볼까요?
$(".temp4").prevUntil(".temp1").css("background-color", "yellow");
3-11. 지정 다음 요소들 선택자
선택한 요소부터, nextUntil의 인수로 사용한 선택자 이전 요소까지 선택합니다.
nextUntil의 인수를 지정하지 않으면, 선택한 요소의 다음 요소들을 모두 선택합니다.
여기서 다음 요소들이란, 같은 부모 요소 밑에 있는 형제 요소들을 의미합니다.
이해가 어렵다면 '지정 이전 요소들 선택자'의 정반대로 생각하시면 됩니다.
$("요소").nextUntil("선택자")지정 이전 요소들 선택자와 마찬가지로, "temp1"과 temp3" 사이의 범위만 타겟이 됩니다.
따라서, 실제적으로 접근하는 요소는 "temp2" 뿐입니다.
$(".temp1").nextUntil(".temp3").css("background-color", "yellow");
3-12. 전체 형제 요소들 선택자
선택한 요소들의 형제들을 모두 가져오거나, 일부 형제 요소만 선택하여 가져올 수 있는 선택자입니다.
단, 선택한 요소 자신은 정작 선택 범위에서 빠집니다.
siblings 인수를 지정하지 않으면, 모든 형제 요소를 가져옵니다.
siblings에 인수를 지정하면, 해당 형제 요소만 가져옵니다.
이름부터 '전체 형제 요소들 선택자'이므로, 역시 같은 부모 요소 하위 형제 요소들끼리만 유효합니다.
$("요소").siblings()다음과 같이 코드를 실행해보겠습니다.
첫 번째 코드를 실행하면 'temp2'의 모든 형제 요소들이 선택되며,
두 번째 코드를 실행하면 'temp3'만 선택됩니다.
$(".temp2").siblings().css("background-color", "yellow");
$(".temp2").siblings(".temp3").css("background-color", "yellow");
긴 글 읽어주셔서 감사합니다.
지금까지 제이쿼리의 기본 선택자, 그 중에서도 '인접관계 선택자'에 대해 알아보았습니다.
감사합니다.
'FrontEnd > JQuery' 카테고리의 다른 글
| 선택자 3 - 탐색 선택자 (위치 탐색 선택자) (0) | 2019.06.11 |
|---|---|
| 선택자 1 - 기본 선택자 (직접 선택자) (0) | 2019.06.06 |
| $(document).ready(function(){}) (0) | 2019.05.31 |
