1. 제이쿼리 문서객체 DOM Tree 이동 메서드
- 문서객체의 선택이 이동되는 메서드들입니다. 흔히, 가족관계 선택을 의미합니다.
1) DOM Tree 가족관계
- <div> 는 <h1> 과 <ul> 의 부모(parent)입니다.
- <h1> 과 <ul> 은 <div> 의 자손(children)입니다.
- <h1> 과 <ul> 은 형제(sibling)입니다.
- 이런 DOM들의 관계를 가족관계라고 부릅니다.
2) DOM Tree 문서객체선택 이동메서드의 종류
| 메서드 종류 | 설명 |
| parent() | 선택된 문서객체의 부모객체를 선택 |
| parents() | 선택된 문서객체의 모든 조상요소를 선택 |
| parents('선택자') | 선택된 문서객체의 조상요소 중 매개변수에 작성한 조상요소를 선택 |
| parentsUntil('선택자') | 선택된 문서객체의 조상요소 중 매개변수에 작성한 요소 전까지 조상요소들을 선택 |
| children() | 선택된 문서객체의 모든 자손요소를 선택 |
| children('선택자') | 선택된 문서객체의 자손요소 중 매개변수에 작성한 요소인 자손요소를 선택 |
| find('선택자') | 선택된 문서객체의 후손요소 중 매개변수에 작성한 요소인 후손요소를 선택 |
| siblings() | 선택된 문서객체의 동위요소 중 모든 동위요소 선택 |
| siblings('선택자') | 선택된 문서객체의 동위요소 중 매개변수에 작성한 요소인 동위요소를 선택 |
| next() | 선택된 문서객체의 다음동위요소(동생)을 선택 |
| nextAll() | 선택된 문서객체의 모든 다음동위요소(동생들)을 선택 |
| nextUntil('선택자') | 선택된 문서객체의 동위요소 중 매개변수에 작성한 동생요소전까지만 선택 |
| prev() | 선택된 문서객체의 이전동위요소(형)을 선택 |
| prevAll() | 선택된 문서객체의 모든 이전동위요소(형들)을 선택 |
| prevUntil('선택자') | 선택된 문서객체의 동위요소 중 매개변수에 작성한 형요소전까지만 선택 |
| find('+ 선택자') | 선택된 문서객체의 바로뒤에 있는 동위요소만 선택 |
| find('~ 선택자') | 선택된 문서객체의 뒤에 있는 모든 동위요소 선택 |
2. 제이쿼리 문서객체 DOM Tree 이동 메서드 예제
1) 부모/조상요소 재선택
## 문법
$('선택자').parent(); //부모선택
$('선택자').parents(); //모든 조상선택
$('선택자').parentsUntil('선택자'); //매개변수에 작성된 선택자 전까지의 조상요소선택
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 문서객체 DOM Tree 이동메서드</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('li').parents().css({
padding: 20,
border: '3px solid black'
});
$('li').parents('section').css('borderColor','red');
$('li').parent().css('borderColor','blue');
$('li').parentsUntil('body').css('borderStyle','dashed');
});
</script>
</head>
<body>
<section><!-- 증조할아버지 -->
<div><!-- 할아버지 -->
<ul><!-- 부모 -->
<li>리스트태그</li><!-- 기준 -->
<li>리스트태그</li>
<li>리스트태그</li>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
</div>
</section>
</body>
</html>- <li> 태그를 제외한 모든 요소들에 테두리와 패딩이 처리됩니다. 이때 <html> 태그와 <body> 태그도 선택됩니다.
- 두번째에서는 특정 조상은 <section> 태그만 선택되어 테두리를 빨간색으로 처리합니다.
- 세번째에서는 <li> 태그의 부모인 <ul> 태그만 선택해서 테두리를 파란색으로 처리합니다.
- 네번째에서는 <body> 태그 전인 <section> , <div> , <ul> 들의 테두리 스타일을 점선으로 바꿉니다.
## 코드 결과
- 코드를 작성한대로 테두리들이 잘 처리된 것을 확인할 수 있습니다.
2) 자손/후손요소 재선택
## 문법
$('선택자').children(); //모든 자손선택
$('선택자').children('선택자'); //매개변수에 선택된 자손선택
$('선택자').find('선택자'); //매개변수에 작성된 선택자 후손선택
$('선택자').find('> 선택자'); //매개변수에 선택된 자손선택
## 코드 예시1 - children( )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 문서객체 DOM Tree 이동메서드</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('div').children().css('color','red');
$('div').children('p').css('textDecoration','underline');
});
</script>
</head>
<body>
<div><!-- 기준 -->
<h1>제목태그1</h1>
<h3>제목태그3</h3>
<p>문단태그</p>
</div>
</body>
</html>- 모든 자손의 글자색을 빨간색으로 처리했습니다.
- <p> 태그만 밑줄 처리했습니다.
## 코드 결과1
- 모든 자손요소의 글자색은 빨간색으로 처리되고, 마지막만 밑줄 들어간 것을 확인할 수 있습니다.
## 코드 예시2 - find( )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 문서객체 DOM Tree 이동메서드</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('div').click(function(){
$(this).find('> h3').css('background','pink');
$(this).find('li').css('background','lightblue');
});
});
</script>
</head>
<body>
<div><!-- 기준 -->
<h3>제목태그</h3><!-- 자손 -->
<ul><!-- 자손 -->
<li>리스트태그</li><!-- 후손 -->
<li>리스트태그</li>
</ul>
</div>
<div><!-- 기준 -->
<h3>제목태그</h3><!-- 자손 -->
<ul><!-- 자손 -->
<li>리스트태그</li><!-- 후손 -->
<li>리스트태그</li>
</ul>
</div>
<div><!-- 기준 -->
<h3>제목태그</h3><!-- 자손 -->
<ul><!-- 자손 -->
<li>리스트태그</li><!-- 후손 -->
<li>리스트태그</li>
</ul>
</div>
</body>
</html>- <div> 태그를 클릭하면, 해당 요소의 자손인 <h3> 태그는 핑크색을 글자색 처리, 후손인 <li> 태그는 라이트블루색으로 글자색을 처리했습니다.
- 여기서의 $(this) 는 클릭당한 <div> 태그를 의미합니다.
## 코드 결과
- 클릭할 때마다 자손/후손의 배경색이 변경되는 것을 확인할 수 있습니다.
- find() 메서드는 선택자로부터 요소를 찾는다고 생각하시면 편합니다.
3) 형제요소 재선택
## 문법
$('선택자').siblings(); //모든 형제로 요소를 선택
$('선택자').siblings('선택자'); //형제 중 매개변수 선택자만 선택
$('선택자').next(); //바로 다음 동생요소만 선택
$('선택자').nextAll(); //모든 동생요소 선택
$('선택자').nextUntil('요소'); //동생요소 중 매개변수 요소전까지만 선택
$('선택자').prev(); //바로 전 형요소만 선택
$('선택자').prevAll(); //바모든 형요소 선택
$('선택자').prevUntil('요소'); //바형요소 중 매개변수 요소전까지만 선택
$('선택자').find('+ 선택자'); //매개변수에 작성된 바로 뒤의 동생요소만 선택
$('선택자').find('> 선택자'); //매개변수에 선택된 모든 동생요소 선택
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 - 문서객체 DOM Tree 이동메서드</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('h3').siblings().css('fontSize',30);
$('h3').siblings('h6').css('fontStyle','italic');
$('h3').nextAll().css('color','red');
$('h3').prevAll().css('color','blue');
$('h3').next().css('textDecoration','underline');
$('h3').prev().css('textDecoration','underline');
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h2>제목태그</h2>
<h3>제목태그</h3><!-- 기준 -->
<h4>제목태그</h4>
<h5>제목태그</h5>
<h6>제목태그</h6>
</body>
</html>- <h3> 태그를 기준으로 형제들을 선택하고 CSS스타일을 지정했습니다.
## 코드 결과
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 8강 문서객체 추가/이동/복제/삭제 메서드 - 오쌤의 니가스터디 (0) | 2022.08.09 |
|---|---|
| [jQuery강좌] 7강 문서객체 HTML요소관련 메서드 - text(), html(), attr(), prop()메서드 (0) | 2022.08.08 |
| [jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디 (0) | 2021.06.26 |
| [jQuery강좌] 4강 문서객체 메서드 문법 - 오쌤의 니가스터디 (0) | 2021.06.24 |
| [jQuery강좌] 3강 제이쿼리 문서객체 선택자 - 오쌤의 니가스터디 (0) | 2021.06.22 |
