부모 노드, 자식 노드 선택
노드 간 부모자식을 선택하는 방법
| 기능 | 설명 |
| childNodes |
모든 자식 노드 선택 (단, 노드에 생략된 text도 포함된다) |
| children | 모든 자식 노드 선택 |
| parentElement | 부모노드 선택 |
| nextElementSibling | 다음 형제 노드 선택 |
| previousElementSibling | 이전 형제 노드 선택 |
| firstChild | 첫번째 자식 노드 선택 |
| lastChild | 마지막 자식 노드 선택 |
예시
위로 가는 버튼을 클릭하면 행이 위로 올라가고 아래로 가는 버튼을 클릭하면 행이 아래도 내려가는 기능이다.
우선 이를 해결하기 위해서는 버튼의 상위 태그의 상위 태그 즉 tr 태그를 받아오고 그 tr의 동등한 태그를 가져와서 두개의 위치를 바꿔주는 함수를 만들어 주는 것이다.
위치를 바꿔주는 함수는 insertBefore(바꿀 값, 기준이 되는 값); 이다. 이를 잘 활용하면 위아래를 자유롭게 왔다 갔다 할 수 있다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {border-spacing: 0; border-collapse: collapse;}
thead th, tbody td {
border: 1px solid black;
}
</style>
</head>
<body>
<table >
<thead>
<tr>
<th>이동</th>
<th>번호</th>
<th>이름</th>
<th>내용</th>
<th>날짜</th>
</tr>
</thead>
<tbody class="table">
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>1</td>
<td>홍길자</td>
<td>안녕!</td>
<td>2023-01-02</td>
</tr>
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>2</td>
<td>이순신</td>
<td>반가워</td>
<td>2023-01-02</td>
</tr>
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>3</td>
<td>이순신</td>
<td>반가워</td>
<td>2023-01-02</td>
</tr>
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>4</td>
<td>이순신</td>
<td>반가워</td>
<td>2023-01-02</td>
</tr>
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>5</td>
<td>이순신</td>
<td>반가워</td>
<td>2023-01-02</td>
</tr>
</tbody>
</table>
<script>
function down(x){
// console.log(x);//자신 태그
// console.dir(x);
// console.log(x.parentNode); // 부모태그(공백이 있다면, 공백을 선택)
// console.log(x.parentElement); //부모태그(순수한 태그의 형태만 선택)
// console.log(x.parentElement.nextElementSibling);//다음 형제
// console.log(x.parentElement.nextElementSibling.nextElementSibling);
// console.log(x.previousElementSibling);//이전 형제(현재 없음)
// console.log(x.parentElement.parentElement.firstElementChild);// tr 기준 첫번째 자식태그
// console.log(x.parentElement.parentElement.lastElementChild);// tr 기준 마지막 자식태그
// console.log(x.parentElement.parentElement.children);// 자식들
// console.log(x.parentElement.parentElement.children[2]);// 자식들 중 3번째
/* ---------------------------------------------------------------------- */
var current = x.parentElement.parentElement;//버튼의 부모행(tr)
var next = current.nextElementSibling;
console.log(current);
console.log(next);
if(next == null){
alert("마지막 행 입니다");
return;//함수 종료
}
//insertBefore는 동작시킬 태그의 부모태그를 얻음
var table = document.querySelector(".table");
table.insertBefore(next,current);//current 앞에 next를 넣는다.
}
function up(x){
var current = x.parentElement.parentElement;//버튼의 부모행(tr)
var before = current.previousElementSibling ;
console.log(current,before);
if(before == null){
alert("첫번째 행 입니다");
return;//함수 종료
}
//insertBefore는 동작시킬 태그의 부모태그를 얻음
var table = document.querySelector(".table");
table.insertBefore(current,before);//current 앞에 before를 넣는다.
}
</script>
</body>
</html>
결과
아래로 두번 클릭을 하면 1번이 3번 위치로 이동한 것을 볼 수 있다.
if문을 활용해서 만약 범위를 벗어나서 바꿀 값이 null이라면 경고창을 통해 마지막행임을 알려주면 된다.
위로 가는 것도 동일한 방식으로 바꿀 값과 기준이 되는 값만 바꿔주면 된다.
table.insertBefore(next,current);//current 앞에 next를 넣는다.
이렇게 위치를 바꿔준다.
table.insertBefore(current,before);//current 앞에 before를 넣는다.
'JS > JS (자바스크립트) ES5' 카테고리의 다른 글
| JS (자바스크립트) Node Example (0) | 2023.01.03 |
|---|---|
| JS (자바스크립트) Node Delete (0) | 2023.01.03 |
| JS (자바스크립트) 노드 생성, 추가 (0) | 2022.12.30 |
| JS (자바스크립트) 노드 CSS변경 (0) | 2022.12.30 |
| JS (자바스크립트) BOM and DOM (2) | 2022.12.29 |
댓글