반응형
DOM 탐색 메서드
- 문서객체의 선택이 이동되는 메서드들입니다. 흔히, 가족관계 선택을 의미합니다.
- (부모, 조상, 자손, 후손, 형제)
| 메서드 종류 | 설명 |
| parent() | 선택된 문서객체의 부모요소를 선택 |
| parents() | 선택된 문서객체의 모든 조상요소를 선택 |
| parents('선택자') | 선택된 문서객체의 조상요소 중 매개변수에 작성한 조상요소를 선택 |
| parentsUntil('선택자') | 선택된 문서객체의 조상요소 중 매개변수에 작성한 요소 전까지 조상요소들을 선택 |
| children() | 선택된 문서객체의 모든 자손요소를 선택 |
| children('선택자') | 선택된 문서객체의 자손요소 중 매개변수에 작성한 자손요소를 선택 |
| find('선택자') | 선택된 문서객체의 후손요소 중 매개변수에 작성한 후손요소를 선택 |
| siblings() | 선택된 문서객체의 동위요소 중 모든 동위요소 선택 |
| siblings('선택자') | 선택된 문서객체의 동위요소 중 매개변수에 작성한 요소인 동위요소를 선택 |
| next() | 선택된 문서객체의 다음동위요소(동생)을 선택 |
| nextAll() | 선택된 문서객체의 모든 다음동위요소(동생들)을 선택 |
| nextUntil('선택자') | 선택된 문서객체의 동위요소 중 매개변수에 작성한 동생요소전까지만 선택 |
| prev() | 선택된 문서객체의 이전동위요소(형)을 선택 |
| prevAll() | 선택된 문서객체의 모든 이전동위요소(형들)을 선택 |
| prevUntil('선택자') | 선택된 문서객체의 동위요소 중 매개변수에 작성한 형요소전까지만 선택 |
| find('+ 선택자') | 선택된 문서객체의 바로뒤에 있는 동위요소만 선택 |
| find('~ 선택자') | 선택된 문서객체의 뒤에 있는 모든 동위요소 선택 |
부모/조상 요소 재선택
<!-- HTML -->
<body>
<div><!-- 할아버지 -->
<ul><!-- 부모 -->
<li class="prt">리스트태그</li><!-- 기준 -->
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
</div>
</body>//javascript
$(document).ready(function(){
//parents
$('.prt').parents().css({
padding: 20,
border: '3px solid black'
});
$('.prt').parents('div').css('border-color','red');
//parent
$('.prt').parent().css('border-color','blue');
//parentsUntil
$('.prt').parentsUntil('body').css('border-style','dashed');
});
자손/후손 요소 재선택
<!-- HTML -->
<body>
<div class="chd"><!-- 기준 -->
<h1>제목태그1</h1>
<h3>제목태그3</h3>
<p>문단태그</p>
</div>
<div class="fnd"><!-- 할아버지 -->
<h3>제목태그</h3>
<ul><!-- 부모 -->
<li>리스트태그</li><!-- 기준 -->
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
</div>
</body>//javascript
$(document).ready(function(){
//children
$('.chd').children().css('color','red');
$('.chd').children('p').css('text-decoration','underline');
//find
$('.fnd').click(function(){
//앞에 > 넣어주면 자손
$(this).find('> h3').css('background','pink');
//후손
$(this).find('li').css('background','lightblue');
});
});
형제요소 재선택
<!-- HTML -->
<body>
<div>
<h1>제목태그</h1>
<h2>제목태그</h2>
<h3 class="bro">제목태그</h3><!-- 기준 -->
<h4>제목태그</h4>
<h5>제목태그</h5>
<h6>제목태그</h6>
</div>
</body>//javascript
$(document).ready(function(){
//siblings
$('.bro').siblings().css('font-size',15);
$('.bro').siblings('h6').css('font-style','italic');
//next, prev
$('.bro').nextAll().css('color','red');
$('.bro').prevAll().css('color','blue');
$('.bro').next().css('text-decoration','underline');
$('.bro').prev().css('text-decoration','underline');
$('.bro').nextUntil('h6').css('background','yellow');
$('.bro').prevUntil('h1').css('background','orange');
//find
$('.bro').find('+ h4').html('제목태그@@@');
$('.bro').find('~ h6').html('제목태그@@@');
});반응형
'jQuery' 카테고리의 다른 글
| 6. HTML 요소 관련 메서드 (0) | 2024.09.10 |
|---|---|
| 4. 필터 메서드 (0) | 2024.08.21 |
| 3. 메서드 문법 (0) | 2024.08.20 |
| 2. 선택자 (0) | 2024.08.07 |
| 1. jQuery 란? (0) | 2024.08.05 |