노드 선택 에서 자주 쓰는 것들
parentElement -> 부모노드 선택
previousElementSibling -> 이전노드 선택 nextElementSibling -> 다음 노드 선택 firstElementChild -> 첫번째 자식노드 선택 lastElementChild -> 마지막 자식노드 선택
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<head></head>
<body>
<section>
<div>이전</div>
<div class="now">
<ul>
<li><a>목록1</a></li>
<li><a>목록2</a></li>
<li><a>목록3</a></li>
</ul>
</div>
<div>다음</div>
</section>
<script>
var now = document.querySelector(".now"); // now class 가져오기
console.dir(now); // now에서 사용할 수 있는 기능 확인
console.log(now.parentNode); // 부모노드선택(text)도 포함해서 선택
console.log(now.parentElement); // 부모노드선택
console.log(now.previousElementSibling); // 이전노드선택
console.log(now.nextElementSibling); // 다음노드선택
console.log(now.firstElementChild); // 첫번째 자식노드선택
console.log(now.lastElementChild); // 마지막 자식노드선택
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<head>
<style>
table {border-spacing: 0; border-collapse: collapse;}
thead th, tbody td{
border: 1px solid black;
}
</style>
</head>
<body>
<button button="type" id="del">일괄 삭제</button>
<table>
<thead>
</thead>
<tbody class="table">
<tr>
<td><input type="checkbox" class="check"></td>
<td>1</td>
<td>츄</td>
<td>안녕하세요</td>
<td>2023-04-06</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>2</td>
<td>도도</td>
<td>안녕하세요</td>
<td>2023-04-06</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3</td>
<td>룽지</td>
<td>안녕하세요</td>
<td>2023-04-06</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>4</td>
<td>츄츄</td>
<td>안녕하세요</td>
<td>2023-04-06</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>5</td>
<td>츄</td>
<td>안녕하세요</td>
<td>2023-04-06</td>
</tr>
</tbody>
</table>
<script>
var btndel = document.getElementById("del");
var list = document.querySelectorAll(".check");
var listall = document.querySelector(".allCheck")
del.onclick = function(){
//console.log(list[0].checked); check 가 되어있다면 true를 반환
//console.log(list[0].value);
for(var i=0; i < list.length; i++){
if(list[i].checked){
//list[i].remove(); 현재 노드 자체가 삭제되어 체크박스 자체가 삭제됨
list[i].parentElement.parentElement.remove();
}
}
}
listall.onclick = function(){
if(listall.checked){
for(var i=0; i<list.length; i++){
list[i].checked = true;
}
}else{
for(var i=0; i<list.length; i++){
list[i].checked = false;
}
}
}
</script>
</body>
</html>