###########################################################################
###########################################################################
8장. DOM
###########################################################################
1. 개요
- Document Object Model
=> Document(html 문서)
Object(JS객체)
=> 사용자가 만든 html(태그 및 속성)문서를 웹브라우저가 랜더링 하기 위해서
html 내의 요소(태그 및 속성)에 해당되는 객체(HTMLButtonElemnet, HTMLAnchorElemnet)
를 생성해서 메모리에 올리고(DOM Tree) 메모리에 올라간 객체를 참조해서 관리하는
방법론.
우리는 메모리에 올라간 JS객체(DOM)의 속성과 메서드를 이용해서
동적인 화면처리가 가능하다.
- DOM 접근방법 (html 문서를 참조하는 Document 객체를 이용, 실제 참조는 document 변수를 이용)
# 하나의 요소(객체)를 반환
document.getElementById("아이디값");
document.querySelector("css 선택자");
# 여러개의 요소를 반환(배열)
document.querySelectorAll("css 선택자");
2. DOM 의 값 종류
1> 시작태그와 종료태그의 content(body)
ex>
<p>홍길동</p>
<p><span>홍길동</span></p>
<div>홍길동</div>
<div><span>홍길동</span></div>
- content 접근은 innerText / innerHTML 사용한다.
2> <input> 태그같은 폼의 태그의 값
- value 속성 사용한다.
3. 폼과 관련 내용 정리
1> 기본내용
<form action="target.html" method="get|post" id="myForm">
아이디: <input />
<input type="submit" value="로그인">
<button>로그인</button>
<input type="button" value="로그인"> <== 눌러도 submit 이 안됨, JS 이용하면 가능함.
</form>
- form 태그안에 감싸져있어야지 submit 이 가능하다.
- input 타입의 button 은 submit 이 불가능하다.
2> 동적으로 form 의 속성값을 변경할 수 있다.
var f = document.querySelector("myForm"); // HTMLFormElement 객체
f.action = "구글url";
f.method = "get|post";
f.submit();
3> submit 은 기본으로 동작됨. 기본동작을 방지할 수 있다.
event.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function get_message() {
var p = document.querySelector("#x");
// console.dir(p); // HTMLParagraphElement
// console.log(p.innerHTML);
// console.log(p.innerText);
//-------------------------------
var div = document.querySelector("#result");
div.innerHTML = p.innerHTML;
}
function set_message() {
var p = document.querySelector("#x");
// p.innerText = "world";
p.innerHTML = "<h1>world</h1>";
}
</script>
</head>
<body>
<p id="x">
<span>
Hello
</span>
</p>
<button onclick="get_message()">값 얻기</button>
<button onclick="set_message()">값 수정</button>
<div id="result"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리02</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function get_message() {
var input = document.querySelector("#username");
console.dir(input); // HTMLInputElement
console.log(input.value);
var div = document.querySelector("#result");
div.innerHTML = input.value;
}
function set_message() {
}
</script>
</head>
<body>
입력값: <input type="text" name="username" id="username" value="이순신">
<button onclick="get_message()">값 얻기</button>
<div id="result"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리03</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function count() {
// var inpiut = document.querySelector("#message");
// var message = input.value;
var message = document.querySelector("#message").value;
var cnt = message.length;
// var div = document.querySelector("#result");
// div.innerHTML = cnt;
document.querySelector("#result").innerHTML = cnt;
}
</script>
</head>
<body>
입력값: <input type="text" name="message" id="message" onkeyup="count()"><br>
글자수: <div id="result"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리04</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 방법1)
function cal(op) {
var v1 = document.querySelector("#v1").value;
var v2 = document.querySelector("#v2").value;
var result;
switch (op) {
case "+":
result = Number.parseInt(v1) + Number.parseInt(v2);
break;
case "*":
result = Number.parseInt(v1) * Number.parseInt(v2);
break;
}
document.querySelector("#result").innerHTML = result;
}
// 방법2)
function cal2() {
var v1 = document.querySelector("#v1").value;
var v2 = document.querySelector("#v2").value;
// event.target 는 매우 중요함.
// var op = event.target; <button>-</button> 로 나옴
// content 를 가져올수 있음.
var op = event.target.innerHTML;
// console.log(op);
var result;
switch (op) {
case "-":
result = Number.parseInt(v1) - Number.parseInt(v2);
break;
case "/":
result = Number.parseInt(v1) / Number.parseInt(v2);
break;
}
document.querySelector("#result").innerHTML = result;
}
</script>
</head>
<body>
입력값1: <input type="text" name="v1" id="v1"><br>
입력값2: <input type="text" name="v2" id="v2"><br>
<button onclick="cal('+')">+</button>
<button onclick="cal('*')">*</button><br>
<button onclick="cal2()">-</button>
<button onclick="cal2()">/</button><br>
결과값: <div id="result"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리05</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function total() {
var quantity = document.querySelector("#quantity").value;
var price = document.querySelector("#price").value;
var total = quantity * price;
document.querySelector("#result").innerHTML = total;
}
</script>
</head>
<body>
수량: <input type="text" name="quantity" id="quantity"><br>
가격:
<select name="price" id="price" onchange="total()">
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
</select>
<div id="result"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리06</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function check() {
// var addr1 = document.querySelector("#arrd1").value;
// var addr2 = document.querySelector("#addr2").value;
var checkbox = document.querySelector("#sameAddress");
console.dir(checkbox.checked);
if (checkbox.checked) {
document.querySelector("#addr2").value
= document.querySelector("#addr1").value;
} else {
document.querySelector("#addr2").value = "";
}
}
</script>
</head>
<body>
회원주소: <input type="text" name="addr1" id="addr1" value="부산시"><br>
배송지가 회원주소와 같다면 체크하시오. <br>
<input type="checkbox" name="sameAddress" id="sameAddress" onclick="check()"><br>
배송지주소: <input type="text" name="addr2" id="addr2"><br>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리07</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
window.onload = init;
function init() {
var li_list = document.querySelectorAll("li");
console.log(li_list);
var sum = 0;
li_list.forEach(function (v, idx) {
// console.log(v.innerText, idx);
sum += Number.parseInt(v.innerText);
});
document.querySelector("#result").innerText = sum;
//----------------------------------------------------------
// table 작업
var td_list = document.querySelectorAll(".x");
console.log(td_list);
var sum2 = 0;
td_list.forEach(function (v, idx) {
console.log(v.innerText, idx);
sum2 += Number.parseInt(v.innerText);
});
document.querySelector("#total").innerText = sum2;
}
</script>
</head>
<body>
<h1>구매목록</h1>
<ul>
<li>2500</li>
<li>3500</li>
</ul>
총합:
<div id="result"></div>
<br>
<!-- --------------------------------- -->
<table border="1">
<tr>
<th>상품명</th>
<th>가격</th>
</tr>
<tr>
<td>사과</td>
<td class="x">2500</td>
</tr>
<tr>
<td>배</td>
<td class="x">3500</td>
</tr>
<tr>
<td>총가격</td>
<td id="total"></td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리08</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 전체선택 & 전체해제
function allCheck() {
var check = document.querySelector("#allCheck").checked;
// console.log(check);
var check_list = document.querySelectorAll(".check");
check_list.forEach(function (v, idx) {
// v : 개별적인 checkbox
v.checked = check;
});
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>
선택
<input type="checkbox" onclick="allCheck()" id="allCheck">
</th>
<th>상품명</th>
<th>가격</th>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>사과</td>
<td>2500</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>배</td>
<td>3500</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>바나나</td>
<td>1500</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>수박</td>
<td>5500</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리09</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 전체선택 & 전체해제
function allCheck() {
var check = document.querySelector("#allCheck").checked;
// console.log(check);
var check_list = document.querySelectorAll(".check");
check_list.forEach(function (v, idx) {
// v : 개별적인 checkbox
v.checked = check;
});
}
// check 된 물품 총합구하기
function total() {
// "input:checked" : input 태그의 checked
var check_list = document.querySelectorAll("input:checked");
// console.log(check_list);
var sum = 0;
check_list.forEach(function (v, idx) {
// console.log(v["data-price"], idx);
// data-price 접근은 dataset.price 형식으로 접근해서 사용한다.
console.dir(v.dataset.price);
sum += Number.parseInt(v.dataset.price);
});
document.querySelector("#result").innerHTML = sum;
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>
선택
<input type="checkbox" onclick="allCheck()" id="allCheck">
</th>
<th>상품명</th>
<th>가격</th>
</tr>
<tr>
<td><input type="checkbox" class="check" data-price="2500"></td>
<td>사과</td>
<td>2500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-price="3500"></td>
<td>배</td>
<td>3500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-price="1500"></td>
<td>바나나</td>
<td>1500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-price="5500"></td>
<td>수박</td>
<td>5500</td>
</tr>
</table>
<button onclick="total()">총합구하기</button>
<div id="result"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리10</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function go() {
var f = document.querySelector("#myForm");
console.dir(f);
f.action = "http://www.google.com";
f.submit();
}
</script>
</head>
<body>
<form action="target.html" id="myForm">
아이디: <input type="text" id="username"><br>
비번: <input type="text" id="passwd"><br>
<input type="submit" value="로그인">
<button>로그인</button>
<!-- 눌러도 submit 이 안됨. 단, JS 를 이용하면 가능하다. -->
<input type="button" value="로그인" onclick="go()">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>js12_DOM처리11</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// 수정버튼 ==> 구글
// 삭제버튼 ==> 다음
function go() {
var btn = event.target.value;
// console.log(btn);
var f = document.querySelector("#myForm");
if (btn == '수정') {
f.action = "http://www.google.com";
} else {
f.action = "http://www.daum.net";
}
f.submit();
}
</script>
</head>
<body>
<form action="target.html" id="myForm">
아이디: <input type="text" id="username"><br>
비번: <input type="text" id="passwd"><br>
<br>
<!-- input 타입의 button 은 자동 submit 이 안된다. -->
<input type="button" value="수정" onclick="go()">
<input type="button" value="삭제" onclick="go()">
</form>
</body>
</html>
4. 객체분해할당 (destructuring) (*)
가. 배열 객체 분해 할당
<!DOCTYPE html>
<html>
<head>
<title>js13_객체분해할당1_배열</title>
<script>
// 객체분해 할당
//1. 배열
//가. 이전 방식
var arr = [10, 20];
var a = arr[0];
var b = arr[1];
//나. 객체분해 할당
var [a, b] = [10, 20];
console.log(a, b);
var [a, b] = [10, 20, 30, 40];
console.log(a, b);
var [a, b, c, d] = [10, 20];
console.log(a, b, c, d);
var [a, b, ...c] = [10, 20, 30, 40];
console.log(a, b, c);
var [a, b, c = 1, d = 2] = [10, 20];
console.log(a, b, c, d);
var a, b;
[a, b] = [100, 200];
console.log(a, b);
//
var [, , c] = [10, 20, 30];
console.log(c);
//활용
var n = 10;
var m2 = 20;
// 2개의 값을 바꾸시오
[m, n] = [n, m];
console.log(n, m)
</script>
</head>
<body>
</body>
</html>
나. JSON 객체 분해 할당
<!DOCTYPE html>
<html>
<head>
<title>js13_객체분해할당2_JSON</title>
<script>
// 객체분해 할당
//2. JSON
//가. 이전 방식
var json = { age: 20, name: '홍길동' };
var name = json.name; // 연관배열 사용 가능 json["age"]
var age = json.age; // 연관배열 사용 가능 json["name"]
console.log(name, age);
//나. 객체분해 할당
var { name, age } = { age: 20, name: '홍길동' };
console.log(name, age);
var { name, email } = { age: 20, name: '홍길동' };
console.log(name, email); //
var { name, email = "inky" } = { age: 20, name: '홍길동' };
console.log(name, email);
//변수명 변경
var { age: x, name: y } = { age: 20, name: '홍길동' };
console.log(x, y);
//일반변수를 객체분해할당시 사용방법은 전체를 ()로 감싸야 된다.
var age, name;
({ age, name } = { age: 20, name: '홍길동' });
console.log(name, age);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>js13_객체분해할당3_함수호출시파라미터로사용</title>
<script>
//1. 이전방식
function fun(n) {
console.log(n[0], n[1]);
}
//배열 객체 전달
fun([10, 20]);
//2. 객체분해할당 방식
function fun([n, n2, n3 = 1]) {
console.log(n, n2, n3);
}
//배열 객체 전달
fun([10, 20]);
////////////////////////////
//1. 이전 방식
function fun(n) {
console.log(n.age, n.name);
}
//json 객체 전달
fun({ age: 20, name: '홍길동' });
//2. 객체분해할당 방식
function fun({ name, age }) {
console.log(name, age);
}
//arrow 함수
var fun = ({ name, age }) => console.log(name, age);
//json 객체 전달
fun({ age: 20, name: '홍길동' });
var { name, age } = { age: 20, name: '홍길동' };
</script>
</head>
<body>
</body>
</html>'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 6일차 - 비동기, Ajax (0) | 2024.05.16 |
|---|---|
| js 6일차 - 클래스, 모듈 (0) | 2024.05.16 |
| js 5일차 - event(2) preventDefault (0) | 2024.05.09 |
| js 4일차 - event(1) (0) | 2024.05.08 |
| js 4일차 - 함수(2)(arrow, generator, 즉시실행함수) (0) | 2024.05.08 |