특정 구조에서 원하는 요소까지 이동하고 찾아갈 수 있다. DOM 구조에서 원하는 요소까지 찾아가는 것을 해보겠다.
DOM이란 문서 객체 모델(The Document Object Model)로 HTML, XML 문서의 프로그래밍 interface이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>09_요소탐색.html</title>
<!-- jQuery import -->
<script src="jquery-3.6.1.min.js"></script>
<style>
table {
border-collapse:collapse;
font:bold 50px Arial, Helvetica, sans-serif;
margin: auto;
}
table td {
padding:20px 35px;
}
</style>
</head>
<body>
<h3>요소 탐색</h3>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<script>
//DOM 구조에서 원하는 요소까지 이동하고 찾아 가는 것
$("td").eq(2).css("background", "red")
.prev().css("background", "yellow")
.parent() //첫번째 tr
.next() //두번째 tr
.children() //두번째 자손 td -> 4, 5, 6
.eq(1).css("background", "blue");
</script>
</body>
</html>요소 탐색
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
$("td").eq(2).css("background", "red")은 td 요소의 2번째(숫자 3이 있는 td)에 접근하는 것이다.
prev()는 현재 접근한 곳(숫자 3)의 이전인 숫자 2가 있는 td를 말한다. parent()는 현재 숫자 2가 있는 td의 부모인 tr을 말한다. next()는 현재의 다음 요소. 즉 4, 5, 6이 있는 tr을 말한다. children()은 자식을 말하므로 td 4, 5, 6이다.
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [43일] jQuery (11) - moment (0) | 2022.09.27 |
|---|---|
| [43일] jQuery (10) - addClass (0) | 2022.09.27 |
| [42일] jQuery (8) - 요소 생성 (0) | 2022.09.26 |
| [42일] jQuery (7) - this (0) | 2022.09.26 |
| [42일] jQuery (6) - 반복문 (0) | 2022.09.26 |
