1. 부모 노드, 자식 노드 선택
- children: 모든 자식 노드 선택
- parentElement: 부모노드 선택
- nextElementSibling: 다음 형제 노드 선택
- previousElementSibling: 이전 형제 노드 선택
- firstChild: 첫번째 자식 노드 선택
- lastChild: 마지막 자식 노드 선택
* 예제
<!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>2019-01-01</td>
</tr>
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>2</td>
<td>이순신</td>
<td>반가워</td>
<td>2019-02-01</td>
</tr>
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>3</td>
<td>이순신</td>
<td>반가워</td>
<td>2019-02-01</td>
</tr>
<tr>
<td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
<td>4</td>
<td>이순신</td>
<td>반가워</td>
<td>2019-02-01</td>
</tr>
<tr>
<td>
<button onclick="down(this)">↓</button>
<button onclick="up(this)">↑</button>
</td>
<td>5</td>
<td>이순신</td>
<td>반가워</td>
<td>2019-02-01</td>
</tr>
</tbody>
</table>
<script>
function down(x){
//console.log(x); 본인태그
//console.log(x.parentNode); //상위태그 선택(공백이 있다면, 공백을 선택해줌)
//console.log(x.parentElement); //상위태그 선택(순수한 태그의 형태만 선택)
//console.dir(x); //현재 상태에서 사용할 수 있는 함수를 알려주는 꿀팁
//console.log(x.parentElement.nextElementSibling); //다음 하위 노드
//console.log(x.parentElement.nextElementSibling.nextElementSibling); //다음다음 하위 노드
//console.log(x.previousElementSibling); //이전 노드
//console.log(x.parentElement.parentElement.firstElementChild); //상위태그 기준 첫번째 하위태그
//console.log(x.parentElement.parentElement.lastElementChild); //상위기준 마지막 하위태그
//console.log(x.parentElement.parentElement.children); //상위 태그의 전체 하위 태그출력
//console.log(x.parentElement.parentElement.children[2]); //상위 태그의 하위태그중 3번째
var current = x.parentElement.parentElement; //버튼의 상위 행 tr
var next = current.nextElementSibling; //tr다음 행
if(next == null){
alert("마지막 행입니다.");
return; //함수종료
}
//insetBefore는 동작시킬 태그의 상위태그를 얻어야 한다.
var table = document.querySelector(".table");
table.insertBefore(next,current); //current 앞에 next를 넣는다.
}
function up(x){
var current = x.parentElement.parentElement;
var previous = current.previousElementSibling;
if(previous == null){
alert("첫번째 행입니다.");
return;
}
var table = document.querySelector(".table");
table.insertBefore(current, previous);
}
</script>
</body>
</html>
2. 노드 삭제
- 요소를 생성하는 방법입니다.
- remove(): 노드 삭제
- removeChild(삭제 할 자식 노드): 자식 노드 삭제
* 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<button button="type" id="delOne">하나씩 삭제</button>
<button button="type" id="del">일괄 삭제</button>
<table>
<thead>
<th><input type="checkbox" class="allCheck"></th>
<th>번호</th>
<th>이름</th>
<th>내용</th>
<th>날짜</th>
</thead>
<tbody class="table">
<tr>
<td><input type="checkbox" class="check"></td>
<td>1</td>
<td>홍길자</td>
<td>안녕!</td>
<td>2019-01-01</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>2</td>
<td>김길자</td>
<td>안녕!</td>
<td>2019-01-01</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3</td>
<td>이길자</td>
<td>안녕!</td>
<td>2019-01-01</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>4</td>
<td>고길자</td>
<td>안녕!</td>
<td>2019-01-01</td>
</tr>
</tbody>
<script>
//하나씩 삭제 removeChild
var delOne = document.getElementById("delOne");
delOne.onclick = function () {
var table = document.querySelector(".table"); //tr의 부모 요소
console.log(table.firstElementChild); //첫번째 요소
console.log(table.children[0]); //배열로(위에 줄과 같은 것)
// table.removeChild(); //괄호 안에 지울 자식 요소가 들어가야 함
table.removeChild(table.firstElementChild);
}
//일괄 삭제 remove
var check = document.querySelectorAll(".check"); //체크박스 전부
var del = document.getElementById("del");
del.onclick = function () {
// console.log(check[0].checked);
// console.log(check[1].checked);
// console.log(check[2].checked);
// console.log(check[3].checked);
// console.log(confirm("삭제 할거니?") );
if (confirm("정말 삭제 하시겠습니까?") == false) {
return;
}
for (var i = 0; i < check.length; i++) {
// console.log(check[i].checked);
if (check[i].checked) {
check[i].parentElement.parentElement.remove(); //tr 삭제
}
}
}
//일괄 선택 vs 일괄 해제
var allCheck = document.querySelector(".allCheck");
allCheck.onclick = function () {
// console.log(allCheck.checked);
if (allCheck.checked) { //전부 체크로 변경
for (var i = 0; i < check.length; i++) {
check[i].checked = true;
}
} else { //전부 체크를 해제
for (var i = 0; i < check.length; i++) {
check[i].checked = false;
}
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>할일 삭제 기능은 아직 구현하지 마세요</h3>
//input은 지우는게 아니라 display를 제어하세요(style)
//밥먹기라고 적으면 밥먹기 내용이 아래로 내려가요(그리고 옆에 삭제 버튼 생성됨)
<h3>할일 목록 만들기</h3>
<button type = "button" id = "btn3">전체 삭제하기</button>
<h3 id=name2></h3>
<div id=textname>
<input type="text" placeholder="이름을 입력하세요" id=name>
<button type="button" id="btn">확인</button>
</div>
<input type="text" placeholder="당신의 할일을 적으세요" id="todo">
<button type="button" id="btn2">확인</button>
<ul class = "list">
</ul>
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
var table = document.querySelectorAll(".list li");
for(var i = 0; i < table.length; i++){
table[i].remove();
}
}
var btn = document.getElementById("btn");
btn.onclick = function () {
var textname = document.getElementById("textname");
var name = document.getElementById("name");
var name2 = document.getElementById("name2");
var btn = document.getElementById("btn");
textname.style.visibility = "hidden";
name2.innerHTML = name.value + "님 안녕하세요";
}
var btn2 = document.getElementById("btn2");
var todo = document.getElementById("todo");
var ul = document.querySelector("ul");
btn2.onclick = function () {
var li = document.createElement("li");
var del = document.createElement("button");
var up = document.createElement("button");
var down = document.createElement("button");
del.innerHTML = "X";
up.innerHTML = "up";
down.innerHTML = "down";
li.innerHTML = todo.value;
li.append(del); //이웃으로 넣어줌(같은 태그 안에 들어가있음)
ul.appendChild(li); //부모 노드(ul)에서 자식 노드(li)로 넣어준다.
li.append(up);
ul.appendChild(li);
li.append(down);
ul.appendChild(li);
del.onclick = function () {
del.parentElement.remove();
}
down.onclick = function () {
var current = this.parentElement;
var next = current.nextElementSibling;
if (next == null) {
alert("마지막 행입니다.");
return;
}
var table = current.parentElement;
table.insertBefore(next, current);
}
up.onclick = function () {
var current = this.parentElement;
var previous = current.previousElementSibling;
if (previous == null) {
alert("첫번째 행입니다.");
return;
}
var table = current.parentElement;
table.insertBefore(current, previous);
}
}
</script>
</body>
</html>
* 문제 1, 내 답안
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>할일 목록 만들기</h3>
<button type="button" class="delAll">전체 삭제하기</button>
<div>
<h3 class="todoTitle" style="display:none;"></h3>
<input type="text" class="todoName" placeholder="이름">
<button type="button" class="todoBtn">확인</button><br>
<input type="text" class="todo" placeholder="할일">
<button type="button" class="addBtn">추가</button>
<ul class="todoList">
</ul>
</div>
<script>
var todoTitle = document.querySelector(".todoTitle");
var todoName = document.querySelector(".todoName");
var todoBtn = document.querySelector(".todoBtn");
todoBtn.onclick = function() {
todoTitle.innerHTML = todoName.value + "님 환영합니다";
todoName.style.display = "none";
todoTitle.style.display = "block";
}
//
var todo = document.querySelector(".todo");
var todoList = document.querySelector(".todoList");
var addBtn = document.querySelector(".addBtn");
addBtn.onclick = function() {
var li = document.createElement("li");
li.innerHTML = todo.value;
todo.value = ""; //사용자 입력 값 초기화
//li.innerHTML = todo.value + "<button onclick='remove(this);'>삭제</button>"; //사용자입력값
//btn => 인라인, 익명함수, addEventListener
var btn = document.createElement("button");
btn.innerHTML = "더블클릭삭제";
btn.ondblclick = remove;
li.appendChild(btn);
//btn2 - 아래로
var btn2 = document.createElement("button");
btn2.innerHTML = "아래로";
btn2.addEventListener("click", down );
li.appendChild(btn2);
//btn3 - 위로
var btn3 = document.createElement("button");
btn3.innerHTML = "위로";
btn3.addEventListener("click", up);
li.appendChild(btn3);
todoList.appendChild(li);
}
//삭제 기능
function remove() {
this.parentElement.remove();
}
//아래로
function down() {
var current = this.parentElement;
var next = current.nextElementSibling;
//...
if(confirm("이동하시겠습니까?") ) {
todoList.insertBefore(next , current);
}
}
//위로
function up() {
var current = this.parentElement;
var prev = current.previousElementSibling;
//.....
if(confirm("이동 하시겠습니까?")) {
todoList.insertBefore(current, prev);
}
}
//전체 삭제 기능
var delAll = document.querySelector(".delAll");
delAll.onclick = function() {
//클릭시에 태그를 얻음
var lis = document.querySelectorAll(".todoList > li");
for(var i = 0; i < lis.length; i++) {
lis[i].remove();
}
}
</script>
</body>
</html>
3. 클래스 속성 제어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.add {color: aqua;}
</style>
</head>
<body>
<h3>클래스 속성 제어하기</h3>
<button id = "btn" class = "btn btn-default">버튼</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
// 태그에 속성 변경 →
// console.log( btn.class); 클래스는 키워드라 안됩니다.
// console.dir(btn);
// console.log(btn.className); //클래스 명을 얻음
// console.log(btn.classList); //클래스 명을 배열로 얻음
// btn.classList.add( "newBtn" ); //클래스명 추가
// btn.classList.remove("btn-default"); //클래스명 삭제
// if(btn.classList.contains("btn") ) {
// console.log("btn 클래스는 존재함");
// }
btn.classList.toggle("aaa"); //있으면 제거, 없으면 추가
}
</script>
<hr>
<h3>하나의 버튼으로 두가지 작업을 처리하기(toggle)</h3>
<button class = "toggle" id ="toggle">토글 버튼</button>
<script>
var toggle = document.getElementById("toggle");
toggle.onclick = function(){
//css, class 제거
// if(toggle.classList.contains("add")) { //add가 포함되어 있다면
// toggle.style.color = "black"; //색상 변경
// toggle.classList.remove("add"); //클래스 제거
// } else {
// toggle.style.color = "aqua";
// toggle.classList.add("add");
// }
toggle.classList.toggle("add");
}
</script>
</body>
</html>
* 문제 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.center {
text-align: center;
}
.content {
overflow: hidden;
border: 1px solid #777;
}
.content,
.content .left,
.content .right {
width: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 5px;
}
.content .right,
.content .left {
float: left;
}
.left .inner,
.right .inner {
border: 1px solid #777;
height: 300px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body class="body">
<header>
<div class="center">
<h2>토글형태 활용하기</h2>
<button id="btn1" class="dark">어둡게보기</button>
<button id="btn2" class="name">이름보기</button>
<!--추가-->
<hr>
</div>
</header>
<section>
<div class="content">
<div class="left">
<div class="inner"><img src="img/profile.png"></div>
</div>
<div class="right">
<div class="inner">
<p class="info" style="display:none;">홍길자<br>20세<br>능력단위<br>Java, Oracle, JSP, CSS, Javascript</p>
<p class="dict">자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수
있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다</p>
<a href="https://www.naver.com">위키백과</a>
</div>
</div>
</div>
</section>
<script>
// var body = document.querySelector("body");
var body = document.body;
// console.log(body); 바디 태그
var all = document.querySelectorAll("p, a, h2");
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
//x 클래스 사용
if (btn1.classList.contains("x")) {
btn1.classList.remove("x");
btn1.innerHTML = "어둡게보기";
body.style.backgroundColor = "#fff";
for (var i = 0; i <= all.length; i++) {
all[i].style.color = "#000";
}
} else {
btn1.classList.add("x");
btn1.innerHTML = "밝게보기";
body.style.backgroundColor = "#000";
for (var i = 0; i <= all.length; i++) {
all[i].style.color = "#fff";
}
}
}
var info = document.querySelector(".info");
var dict = document.querySelector(".dict");
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
if (btn2.classList.contains("x")) {
btn2.classList.remove("x"); //x를 추가
btn2.innerHTML = "내용보기";
info.style.display = "none";
dict.style.display = "block";
} else {
btn2.classList.add("x"); //x를 추가
btn2.innerHTML = "이름보기";
info.style.display = "block";
dict.style.display = "none";
}
}
</script>
</body>
</html>