학원 day57. DOM, BOM

DOM(Document Object Model)

 - 문서객체 모델

 - HTML, XML 등의 문서를 엑세스하는 표준을 정의하고 있다.

   - DOM은 w3c에서 HTML, XML 문서를 다루는 표준(인터페이스)를 정의한 것이다.

   - DOM에 정의된 표준에 대한 구현은 브라우저 제조사, 프로그래밍 언어 개발사, 라이브러리 개발자가 담당한다.

   - DOM에서 정의한 표준은 브라우저 종류나, 프로그래밍 언어의 종류에 상관없이 동일한 API(메소드이름, 실행방법, 반환타입 등 사용법이 동일하다.)로 구현되어 있다.

 

DOM의 특징

 - 모든 엘리먼트는 객체다.

 - 모든 엘리먼트의 프로퍼티를 정의하고 있다.

 - 엘리먼트를 엑세스하는 메소드를 정의하고 있다.

 - 모든 엘리먼트의 이벤트를 정의하고 있다.

 

DOM의 주요 객체

Document	웹 브라우저 HTML 문서를 로딩했을 때, Document 객체가 된다.
Element	HTML의 태그를 표현하는 객체다. Document객체에는 현재 로딩된 HTML문서의 모든 태그에 대한 Element객체가 포함되어있다.
Attr	HTML 태그의 속성을 표현하는 객체다.
HTMLCollection	Element객체를 여러 개 포함할 수 있는 배열유사객체다.
Event	사용자가 웹 페이지와 상호작용할 때 마다 엘리먼트에서 발생되는 객체다.

 

Document 객체

메소드

반환값 / 메소드명 / 설명

Element	createElement("태그명")	지정된 태그명의 Element 객체 생성한다.
Attr	createAttribute("속성명", "속성값")	지정된 속성정보를 가진 Attr 객체를 생성한다.
TextNode	createTextNode("텍스트컨텐츠")	지정된 텍스트내용을 가지는 TextNode객체를 생성한다.
Element	getElementById("id")	지정된 id에 해당하는 Element객체를 반환한다.
HTMLCollection	getElementsByTagName("태그명")	지정된 태그명에 해당하는 모든 Element객체를 HTMLCollection에 담아서 반환한다.
HTMLCollection	getElementsByClassName("클래스")	지정된 클래스를 가지고 있는 모든 Element객체를 HTMLCollection에 담아서 반환한다.
Element	querySelector("CSS선택자")	지정된 선택자로 검색된 첫번째 Elemenet객체를 반환한다.
HTMLCollection	querySelectorAll("CSS선택자")	지정된 선택자로 검색된 모든 Element객체를 HTMLCollection에 담아서 반환한다.

 

Element 객체

Property

프로퍼티명 / 설명

tagName	Element의 태그명을 반환한다.
textContent	Element의 텍스트 컨텐츠를 조회/변경할 수 있다.
innerHTML	Element의 html 컨텐츠를 조회/변경할 수 있다.
id	Element의 id값을 반환한다.
style	해당 엘리먼트의 style 정보가 포함된 객체를 반환한다
children	해당 엘리먼트의 자식엘리먼트들을 반환한다
parentElement	해당 엘리먼트의 부모 엘리먼트를 반환한다.
value	input, select, textarea Element의 값을 조회/변경할 수 있다.
disabled	input, select, textarea, button Element의 비활성화 여부를 조회/변경할 수 있다. true는 비활성화, false는 활성화
readOnly	input, select, textarea, button Element의 읽기전용 여부를 조회/변경할 수 있다. true는 읽기전용, false는 편집가능
checked	checkbox, radio Element의 체크여부를 조회/변경할 수 있다. true는 체크상태, false는 체크상태아님
options	select Element의 모든 option Element객체를 HTMLCollection에 담아서를 반환한다.
selectedIndex	select Element의 현재 선택된 옵션의 인덱스를 조회/변경할 수 있다.

 

Method

반환값 / 메소드명 / 설명

HTMLCollection	getElementsByTagName("태그명")	지정된 태그명에 해당하는 모든 Element객체를 HTMLCollection에 담아서 반환한다.
HTMLCollection	getElementsByClassName("클래스")	지정된 클래스를 가지고 있는 모든 Element객체를 HTMLCollection에 담아서 반환한다.
Element	querySelector("CSS선택자")	지정된 선택자로 검색된 첫번째 Elemenet객체를 반환한다.
HTMLCollection	querySelectorAll("CSS선택자")	지정된 선택자로 검색된 모든 Element객체를 HTMLCollection에 담아서 반환한다
	remove()	엘리먼트를 삭제한다
Node	insertBefore(Element)	지정된 엘리먼트를 첫 번째 자식노드로 추가한다.
Node	appendChild(Element)	지정된 엘리먼트를 맨 마지막 자식노드로 추가한다.
Node	removeChild(Element)	지정된 자식 엘리먼트를 삭제한다.
Element	firstElementChild()	해당 엘리먼트의 첫번째 자식 엘리먼트를 반환한다.
Element	lastElementChild()	해당 엘리먼트의 마지막 자식 엘리먼트를 반환한다.
Element	previousElementSibling()	해당 엘리먼트의 형제 중 바로 앞에 위치한 엘리먼트를 반환한다.
Element	nextSibling(), nextElementSibling()	해당 엘리먼트의 형제 중 바로 뒤에 위치한 엘리먼트를 반환한다.
String	getAttribute("속성명")	해당 엘리먼트에서 지정된 속성명에 해당하는 속성값을 반환한다.
	setAttribute("속성명", "속성값")	해당 엘리먼트에서 속성을 변경/추가한다.
	removeAttribute("속성명")	해당 엘리먼트에서 지정된 속성을 삭제한다.
boolean	hasAttribute("속성명")	해당 엘리먼트가 지정된 속성을 가지고 있으면 true를 반환한다.

 

엘리먼트 조작하기

 
1. 태그의 텍스트컨텐츠를 조회/변경
<p>텍스트컨텐츠</p>

조회
var el = document.querySelector("p");
var content = el.textContent; // el이 참조하는 Element객체의 textContent 프로퍼티에 저장된 값을 조회서 content 변수에 대입한다.
console.log(content); // "텍스트컨텐츠"가 출력된다.
변경
el.textContent = "변경된 텍스트 컨텐츠"; // el이 참조하는 Element객체의 textContent 프로퍼티에 "변경된 텍스트 컨텐츠"를 대입한다.
 // <p>텍스트컨텐츠</p> ---> <p>변경된 텍스트 컨텐츠</p>

2. 태그의 html 컨텐츠를 조회/변경
<ul>
<li>커피</li>
<li>쥬스</li>
<li>펩시 콜라</li>
</ul>

조회
var el = document.querySelector("ul");
var htmlContent = el.innerHTML; // el이 참조하는 Element객체의 innerHTML 프로퍼티에 저장된 값을 조회해서 htmlContent 변수에 대입한다.
// htmlContent -> "<li>커피</li><li>쥬스</li><li>펩시 콜라</li>"
var content = el.textContent; // content -> "커피    쥬스     펩시 콜라"
변경하기(전부 삭제하기)
el.innerHTML = "";
<ul>
</ul>
변경하기(추가하기)
var htmlContent = el.innerHTML;
htmlContent = htmlContent + "<li>치즈 케이크</li>";
el.innerHTMl = htmlContent; 
<ul>
<li>커피</li>
<li>쥬스</li>
<li>펩시 콜라</li>
<li>치즈 케이크</li>
</ul>
변경하기(완전히 새로 작성하기)
var html = "";
html += "<li>에스프레소</li>";
html += "<li>아이스 아메리카노</li>";
html += "<li>바닐라 라떼</li>";

el.innerHTMl = html;
<ul>
<li>에스프레소</li>
<li>아이스 아메리카노</li>
<li>바닐라 라떼</li>
</ul>

3. 태그의 속성을 추가/조회/변경
<img src="poster1.jpg" id="post-img">

var el = document.querySelector("#post-img");

추가하기/변경하기 (*setAttribute는 값이 없으면 추가하고, 있으면 변경한다.)
el.setAttribute("alt", "포스터 사진입니다."); // <img src="poster1.jpg" id="post-img" alt="포스터 사진입니다." />
el.setAttribute("src", "poster3.png"); // <img src="poster3.png" id="post-img" />
조회하기
var srcValue = el.getAttribute("src"); // srcValue -> "poster1.jpg"

4. 태그의 클래스를 추가/변경/삭제/토글
<button class="btn btn-primary disabled">버튼</button>

var el = document.querySelector('.btn');
추가하기
el.classList.add('btn-sm'); // <button class="btn btn-primary disabled btn-sm">버튼</button>
변경하기
el.classList.replace('btn-primary', 'btn-success'); // <button class="btn btn-success disabled">버튼</button>
삭제하기
el.classList.remove("disabled"); // <button class="btn btn-primary">버튼</button>
토글하기
el.classList.toggle("disabled"); // disabled가 있으면 - 삭제, disabled가 없으면 - 추가

 

=> 원래 속성값 변경은 setAttribute이지만 class를 변경하기는 어렵다. class안에는 값이 여러개 있으니까. 그래서 classList가 제공해주는 메소드를 통해서 조작할 수 있다.

5. 태그의 스타일을 조회/변경
<p style="color:black;">텍스트 컨텐츠</p>
var el = document.querySelector("p");
변경하기
el.style.color = 'red';

* 스타일을 직접 조작하는 대신 스타일이 정의되어 있는 클래스를 추가/변경/삭제해서 스타일을 변경할 수 있다.
<p class="text-dark">텍스트 컨텐츠</p>
var el = document.querySelector("p");
변경하기
el.classList.replace("text-dark", "text-danger");

6. 폼요소의 값을 조회/변경 (값을 조회하고, 바꾸는 건 모두 value다. 전부다 문자열로 읽혀진다.)

<input type="text" name="username" />
<textarea name="memo">나는 나다.</memo>
<select name="city">
   <option value="seoul" selected> 서울</option>
   <option value="pusan"> 부산</option>
</select>

var el1 = document.querySelector("[name=username]");
var el2 = document.querySelector("[name=memo]");
var el3 = document.querySelector("[name=city]");

조회하기
  var 이름 = el1.value;
  var 메모 = el2.value;
  var 도시 = el3.value; // seoul
변경하기
  el1.value = "강감찬";
  el2.value = "너는 너다.";
  el3.value = 'pusan'; // 부산이 선택된다.

7. 폼요소의 체크여부를 조회/변경

      <input type="checkbox" id="skill-1" name="skill" value="java"> 자바
      <input type="checkbox" id="skill-2" name="skill" value="python" checked> 파이썬 
      <input type="checkbox" id="skill-3" name="skill" value="db" checked="checked"> 데이터베이스 

// checked 나 checked="checked" 둘 다 가능!

       var el = document.querySelector("#skill-1");
       체크여부 조회하기
        var value = el.checked;     // value의 값은 true/false다.
       체크박스 체크하기
        el.checked = true;
        // el.setAttribute("checked", "checked"); // setAttribute(name, value)로 체크여부를 변경할 수는 없다. 태그에 적을 때에만 checked="checked"가 가능하다. 
        체크박스 체크해제하기
         el.checked = false;

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>체크박스, 라디오버튼의 체크 선택/해제</title>
</head>
<body>
	<h1>체크박스, 라디오버튼의 체크 선택/해제</h1>
	
	<form>
		<div>
			<label>전체 선택/해제</label>
			<input type="checkbox" id="checkbox-all-toggle" onchange="toggleAllCheckUncheck()">
		</div>
		<div>
			<label>보유기술</label>
			<input type="checkbox" name="skill" value="java" checked>자바
			<input type="checkbox" name="skill" value="python" checked="checked">파이썬
			<input type="checkbox" name="skill" value="c">C언어
			<input type="checkbox" name="skill" value="c++">C++
		</div>
	</form>
	
	<button onclick="uncheck();">체크박스 선택해제하기</button>
	<button onclick="check();">체크박스 선택하기</button>
	<button onclick="toggleCheck();">체크박스 선택해제 토글하기</button>
	<button onclick="checkAll();">체크박스 전부 선택하기</button>
	<button onclick="uncheckAll()">체크박스 전부 선택 해제하기</button>
	<button onclick="checkOneMore()">체크박스 선택된것이 하나이상 있는지 조사하기</button>
	
	
	<script type="text/javascript">
	
		function uncheck() {
			// 체크박스 자바를 선택해제하기
			var el = document.querySelectorAll('[name=skill]')[0];
			el.checked = false;
		}
		function check() {
			// 체크박스 자바를 선택하기
			var el = document.querySelectorAll('[name=skill]')[0];
			el.checked = true;
		}
		function toggleCheck() {
			// 체크박스 자바를 선택해제를 토글하기
			var el = document.querySelectorAll('[name=skill]')[0];
			el.checked = !el.checked
		}
		function checkAll() {
			// 체크박스 전체 선택하기
			var collection = document.querySelectorAll('[name=skill]');
			for (var index = 0; index < collection.length; index++) {
				var el = collection[index];
				el.checked = true;
			}
		}
		function uncheckAll() {
			// 체크박스 전체 선택하기
			var collection = document.querySelectorAll('[name=skill]');
			for (var index = 0; index < collection.length; index++) {
				var el = collection[index];
				el.checked = false;
			}
		}
        	function toggleAllCheckUncheck() {
			// 전체 선택/해제 체크박스의 체크상태를 조회하다.
			var el = document.querySelector("#checkbox-all-toggle");
			var currentChecked = el.checked;
			
			// 모든 보유기술 체크박스의 체크상태를 위에서 조회한 전체 선택/해제 체크박스의 체크상태와 같은 상태로 만든다.
			var collection = document.querySelectorAll('[name=skill]');
			for (var index = 0; index < collection.length; index++) {
				var el = collection[index];
				el.checked = currentChecked;
			}
		}
	</script>
</body>
</html>

- 전체 선택은 서버로 전달되는 값이 아닌 선택박스 체크 선택/해제 하는역할만 하기 때문에 name을 붙이지 않는다.

name을 붙이지 않으면 서버로 값이 전달되지 않는다. 

 

8. 폼요소의 비활성화/읽기전용 여부를 조회/변경

<input type="text" name="username" disabled/>
<button id="btn-register" disabled="disabled">등록</button>

var el1 = document.querySelector("[name=username]");
var el2 = document.querySelector("#btn-register");

비활성화/읽기전용으로 변경하기
el1.disabled = true;
el2.disabled = true; // 모든 폼요소는 비활성화, 활성화가 가능하다.
el1.readOnly = true;
el2.readOnly = true; // 버튼, 체크박스, 라디오버튼, 셀렉터박스에 읽기전용 설정은 의미가 없다.
활성화/편집가능으로 변경하기
el1.disabled = false;
el2.disabled = false;
el1.readOnly = false;
el2.readOnly = false; // 버튼, 체크박스, 라디오버튼, 셀렉터박스에 읽기전용 설정은 의미가 없다.
* 읽기전용으로 지정된 입력요소 : 값을 수정할 수 없다. 서버로 값이 제출된다.
* 비활성화로 지정된 입력요소 : 값을 수정할 수 없다. 서버로 값이 제출되지 않는다.

---

BOM 

- Browser Object Model

- 모든 브라우저들이 포함하고 있어야 할 객체들, 브라우저에 빌트인된 객체들이다.

- 자바스크립트를 사용해서 BOM객체들과 상호작용할 수 있다.

 

프로퍼티

프로퍼티명 / 설명

document	Document 객체를 반환한다.
location	Location 객체를 반환한다.
history	History 객체를 반환한다.
navigator	Navigator 객체를 반환한다.
screen	Screen 객체를 반환한다.
console	Console 객체를 반환한다.
opener	현재 윈도우를 생성한 윈도우객체를 반환한다. 팝업창에서 그 팝업창을 생성한 윈도우가 opener다.

메소드

반환값 / 메소드명 / 설명

	alert("메세지")	경고메세지창을 표시한다.
boolean	confirm("메세지")	확인/취소 버튼을 포함하고 있는 확인창을 표시한다. 확인을 클릭하면 true값이 반환된다.
Window	open("url", "name", specs)	새로운 창을 연다.
	close()	현재 창을 닫는다.
정수	parseInt('문자열')	문자열을 정수로 변환한다. 문자열의 첫글자는 반드시 숫자여야 한다. 첫글자가 숫자가 아닌경우 NaN이 반환된다.
실수	parseFloat('문자열')	문자열을 실수로 변환한다. 문자열의 첫글자는 반드시 숫자여야 한다. 첫글자가 숫자가 아닌경우 NaN이 반환된다.
정수	setTimeout(함수, 밀리초)	지정된 시간만큼 경과된 후 해당 함수가 한번 실행된다.
정수	setInterval(함수, 밀리초)	지정된 시간간격이 경과될 때마다 해당 함수가 반복 실행된다.
	clearTimeout(숫자값)	실행중인 setTimeout()을 중지시킨다. 숫자값은 setTimeout()함수가 반환하는 숫자값을 넣는다.
	clearInterval(숫자값)	실행중인 setInterval()을 중지시킨다. 숫자값은 setInterval()함수가 반환하는 숫자값을 넣는다.

 

<title> DOM API </title>
</head>
<body>
	<h1>HTML Document 객체의 주요 API</h1>

	<h3>도서 베스트 셀러</h3>
	<ol>
		<li id="top-rank-book" class="book-item">이것이 자바다</li>
		<li class="book-item">자바의 정석</li>
		<li class="book-item">이펙티브 자바</li>
		<li class="book-item">혼자서 공부하는 자바</li>
	</ol>
	
	<h3>음반 베스트 셀러</h3>
	<ol>
		<li id="top-rank-cd" class="cd-item">BTS 음반</li>
		<li class="cd-item">뉴진스</li>
		<li class="cd-item">아이브</li>
		<li class="cd-item">트와이스</li>
	</ol>
	
	<script type="text/javascript">
		// Document 객체의 주요 메소드
		
		// 1. Element getElementById("아이디속성값") : 지정된 id속성값에 해당하는 엘리먼트 객체를 반환한다.
		var el1 = document.getElementById('top-rank-book');
		console.log("엘리먼트 -> ", el1);
		
		var el2 = document.getElementById('top-rank-cd');
		console.log('엘리먼트 -> ', el2);
		
		// 2. Element querySelector("#아이디속성값") : 지정된 id속성값에 해당하는 엘리먼트 객체를 반환한다.
		var el3 = document.querySelector("#top-rank-book");
		var el4 = document.querySelector("#top-rank-cd");
		
		console.log("엘리먼트 -> ", el3);
		console.log('엘리먼트 -> ', el4);
	
		// 3. HTMLCollection getElementByTagName("태그명") : 지정된 태그명에 해당하는 모든 엘리먼트 객체를 
		//    HTMLCollection 객체에 담아서 반환한다.
		var collection1 = document.getElementsByTagName("h1");
		var collection2 = document.getElementsByTagName("h3");
		var collection3 = document.getElementsByTagName("li");
		
		console.log("검색된 엘리먼트 전체 갯수 -> ", collection1.length);
		console.log("검색된 엘리먼트 전체 갯수 -> ", collection2.length);
		console.log("검색된 엘리먼트 전체 갯수 -> ", collection3.length);
		
		console.log("검색된 엘리먼트들 -> ", collection1);
		console.log("검색된 엘리먼트들 -> ", collection2);
		console.log("검색된 엘리먼트들 -> ", collection3);
		
		// 4. NodeList querySelectorAll("태그명") : 지정된 태그명에 해당하는 모든 엘리먼트 객체를 
		// NodeList 객체에 담아서 반환한다.
		var collection4 = document.querySelectorAll("h1");
		var collection5 = document.querySelectorAll("h3");
		var collection6 = document.querySelectorAll("li");
		
		console.log("검색된 엘리먼트 전체 갯수 -> ", collection4.length);
		console.log("검색된 엘리먼트 전체 갯수 -> ", collection5.length);
		console.log("검색된 엘리먼트 전체 갯수 -> ", collection6.length);
		
		console.log("검색된 엘리먼트들 -> ", collection4);
		console.log("검색된 엘리먼트들 -> ", collection5);
		console.log("검색된 엘리먼트들 -> ", collection6);
		
		// 5. HTMLCollection getElementsByClassName("클래스속성값") : 지정된 클래스 속성값을 포함하고 있는
		// 모든 엘리먼트들을 HTMLCollection 객체에 담아서 반환한다.
		var collection7 = document.getElementsByClassName("book-item");
		
		console.log("검색된 엘리먼트 객체 갯수->", collection7.length);
		console.log("검색된 엘리먼트들 ->", collection7);
		
		// 6. NodeList querySelectAll(".클래스속성값") : 지정된 클래스 속성값을 포함하고 있는 
		// 모든 엘리먼트들을 NodeList 객체에 담아서 반환한다.
		var collection8 = document.querySelectorAll(".book-item");
		
		console.log("검색된 엘리먼트 객체 갯수->", collection8.length);
		console.log("검색된 엘리먼트들 ->", collection8);
		
		for (var index = 0; index <collection8.length; index++) {
			var el = collection8[index];
			var bookTitle = el.textContent;
			console.log("책 제목", bookTitle);
		}
		
	</script>

 

1,2번 실행결과

3,4번 실행결과

노드리스트도 엘리먼트 객체를 여러개 담을수 있는 객체이다. = HTMLCollection

5, 6번 실행결과

---

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 컨텐츠 조회/변경</title>
</head>
<body>
	<h1>엘리먼트의 컨텐츠 조회 변경</h1>

	<p>메뉴를 확인하세요</p>
	
	<h3>메뉴 목록</h3>
	<ul id="drink-menu">
		<li>아이스 아메리카노</li>
		<li>카페라떼</li>
		<li>쥬스</li>
	</ul>
	
	<h3>케잌 메뉴 목록</h3>
	<ul id="cake-menu">
		<li>치즈케익</li>
		<li>초코케익</li>
		<li>딸기케익</li>
	</ul>
	
	<div>
		<button onclick="handler1();">텍스트컨텐츠 조회</button>
		<button onclick="handler2();">텍스트컨텐츠 변경</button>
		<button onclick="handler3();">HTML컨텐츠 조회</button>
		<button onclick="handler4();">HTML컨텐츠 삭제</button>
		<button onclick="handler5();">HTML컨텐츠 추가</button>
		<button onclick="handler6();">HTML컨텐츠 변경</button>
	</div>
	
	<script type="text/javascript">
	   var el1 = document.querySelector("p");
	   var el2 = document.querySelector("#drink-menu");
	   
	   function handler1(){
		   var content = el1.textContent;
		   alert(content);
	   }
	   
	   function handler2(){
	   		el1.textContent = "메뉴를 꼼꼼히 확인하세요";
	   }
	   function handler3(){
		   var htmlContent = el2.innerHTML;
		   alert(htmlContent);
	   }
	   function handler4(){
		   el2.innerHTML = "";  // <ul>태그의 내부 HTML 컨텐츠를 삭제한다. <ul>태그는 삭제되지 않는다.
		   el2.remove();        // <ul>태그를 삭제한다. 
	   }
	   function handler5(){
		   // li태그의 갯수를 확인해서 한번만 추가되게 하자
		   var collection = document.querySelectorAll("#drink-menu li");  // 한칸 띄우면 자손선택자
		   if (collection.length == 6) {
			   return;
		   }
		   
		   el2.innerHTML += '<li>코카콜라</li>';
		   el2.innerHTML += '<li>펩시콜라</li>';
		   el2.innerHTML += '<li>사이다</li>';
	   }
	   function handler6(){ 
		   var htmlContent = "";
		   htmlContent += "<li>유기농 당근 쥬스</li>";
		   htmlContent += "<li>유기농 딸기 쥬스</li>";
		   htmlContent += "<li>유기농 자몽 쥬스</li>";
		   htmlContent += "<li>유기농 오렌지 쥬스</li>";
		   
		   el2.innerHTML = htmlContent;
	   }
	   
	</script>
</body>
</html>

 

querySelector는 아이디나 태그나 속성값을 찾을 때 모두 메소드명이 같아서 

아이디속성값을 찾을 때는 #을 붙이고, 태그를 찾을 때는 태그명, 클래스속성값을 찾고 싶을 때는 .을 붙인다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트의 속성 추가/변경/조회</title>
</head>
<body>
	<h1>엘리먼트의 속성 추가/변경/조회</h1>
	
	<img src="../resources/images/sample.jpg" width="200" height="250">
	<div>
	<%--
	<%
		
		for (String filename : filenames) {
	%>
			<img src="../resources/images/<%=filename %>" width="40" height="50" onclick="changeImage('<%=filename %>')" />
	<%
		}
	%>
	--%>
		<img src="../resources/images/sample.jpg" width="40" height="50" onclick="changeImage('sample.jpg')" />
		<img src="../resources/images/sample2.jpg" width="40" height="50" onclick="changeImage('sample2.jpg')" />
		<img src="../resources/images/sample3.jpg" width="40" height="50" onclick="changeImage('sample3.jpg')" />
	</div>
	
	<div>
		<button onclick="handler1()">속성 변경</button>
		<button onclick="handler2()">속성 추가</button>
		<button onclick="handler3()">속성 조회</button>
	</div>
	
	<script type="text/javascript">
		var el = document.querySelector("img");
		
		function changeImage(filename) {
			el.setAttribute("src", "../resources/images/" + filename);
		}
	
		function handler1() {
			el.setAttribute("src", "../resources/images/sample2.jpg");
		}
		function handler2() {
			el.setAttribute("alt", "스타 현장 사진");
		}
		function handler3() {
			var value = el.getAttribute("src");
			alert(value);
		}
	</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>엘리먼트의 클래스 추가/변경/삭제/토글</title>
</head>
<body>
	<h1>엘리먼트의 클래스 추가/변경/삭제/토글</h1>
	
	<div class="mb-3">     <%-- 바깥쪽 여백을 3정도 주겠다는 것임 --%>
		<button class="btn btn-primary" id="btn-1">버튼1</button>
		<button class="btn btn-primary" id="btn-2">버튼2</button>
		<button class="btn btn-primary disabled" id="btn-3">버튼3</button>
		<button class="btn btn-primary disabled" id="btn-4">버튼4</button>
	</div>
	
	<div class="mb-3">
		<button onclick="handler1()">클래스 추가</button>
		<button onclick="handler2()">클래스 변경</button>
		<button onclick="handler3()">클래스 삭제</button>
		<button onclick="handler4()">클래스 토글</button>
	</div>
	
	<script type="text/javascript">
		var btn1 = document.querySelector("#btn-1");
		var btn2 = document.querySelector("#btn-2");
		var btn3 = document.querySelector("#btn-3");
		var btn4 = document.querySelector("#btn-4");
		
		function handler1(){
			btn1.classList.add('btn-sm');     <%-- 버튼의 크기를 작게 만들어준다. --%>
		}
		function handler2(){
			btn2.classList.replace('btn-primary', 'btn-danger');		
				}
		function handler3(){
			btn3.classList.remove('disabled');    <%-- 클래스 속성값을 바꿀 수 있다. --%>
			
		}
		function handler4(){
			btn4.classList.toggle('disabled');   <%-- 누를때마다 반대로 작동, 보였다가 안보였다하는 기능 --%>
		}
	</script>

</body>
</html>

 

스타일을 직접 조작하기보다는 정의되어 있는 클래스를 이용하는게 편하다.

 

지금까지 한 거 : 

<p 속성명="속성값" class="클래스속성값">컨텐츠<p>

 

6. 폼요소의 값을 조회/변경 (** 중요 **)

<html>
<head>
<meta charset="UTF-8">
<title>폼 입력요소의 값 조회/변경</title>
</head>
<body>
   <h1>폼 입력요소의 값 조회/변경</h1>
   
   <form>
      <div>
         <label>입력필드 : </label>
         <input type="text" name="field1" />
      </div>
      <div>
         <label>비밀번호 : </label>
         <input type="password" name="field2" />
      </div>
      <div>
         <label>날짜필드 : </label>
         <input type="date" name="field3" />
      </div>
      <div>
         <label>콤보박스 : </label>
         <select name="field4">
            <option value="s"> 서울</option>
            <option value="k"> 경기</option>
            <option value="i"> 인천</option>
            <option value="g" selected> 강원</option>
         </select>
      </div>
      <div>
         <label>입력필드 : </label>
         <textarea name="field5" rows="3"></textarea>
      </div>
   </form>
   
   <div>
      <button onclick="handler1()">값 조회하기</button>
      <button onclick="handler2()">값 변경하기</button>
   </div>
   
   	<script type="text/javascript">
   		var el1 = document.querySelector("[name=field1]");  
   		var el2 = document.querySelector("[name=field2]"); 
   		var el3 = document.querySelector("[name=field3]");  
   		var el4 = document.querySelector("[name=field4]");  
   		var el5 = document.querySelector("[name=field5]");  
   		
   		// 값을 조회하는 것도 value, 입력필드의 모든 값은 문자열로 조회된다.
   		function handler1() {
   			var value1 = el1.value;
   			var value2 = el2.value;
   			var value3 = el3.value;
   			var value4 = el4.value;
   			var value5 = el5.value;
   		
   			console.log("첫번째 입력필드-> ", value1);
   			console.log("두번째 입력필드-> ", value2);
   			console.log("세번째 입력필드-> ", value3);
   			console.log("네번째 입력필드-> ", value4);
   			console.log("다섯번째 입력필드-> ", value5);
   		}
   		
   		// 값을 바꾸는 것은 value
   		function handler2() {
   			el1.value = "김유신";    // <input type="text" name="field1" />
   			el2.value = "zxcv1234";  // <input type="password" name="field2" />
   			el3.value = "2022-09-23";  // 09에 0을 꼭 붙여야 한다. <input type="date" name="field3" />
   			el4.value = "s";     // select의 값이 s여야 한다는 것임.  <select name="field4"></select>
   			el5.value = "나는 나다."; // <textarea name="field5"></textarea>
   		}
   	</script>
   
</body>
</html>

<html>
<head>
<meta charset="UTF-8">
<title>폼 입력요소의 값 조회/변경</title>
</head>
<body>
	<h1>폼 입력요소의 값 조회/변경</h1>
	
	<form>
		<div>
			<label>대출금액</label>
			<!-- 
				type="text"일 때는 onkeyup 이벤트로 입력필드와 이벤트핸들러함수를 바인딩해야 한다.
				<input type="text" name="amount" value="100000000" step="10000000" onkeyup="handler();">
			
				type="number"일 때는 onkeyup과 onchange 이벤트로 입력필드와 이벤트핸들러함수를 바인딩할 수 있다.
			 -->			
			<input type="number" name="amount" value="100000000" step="10000000" onkeyup="handler();" onchange="handler();">
		</div>
		<div>
			<label>상환기간</label>
			<select name="months" onchange="handler();">
				<option value="12"> 12개월</option>
				<option value="24"> 24개월</option>
				<option value="36"> 36개월</option>
				<option value="48"> 48개월</option>
				<option value="60"> 60개월</option>
			</select>
		</div>
		<div>
			<label>대출금리</label>
			<select name="rate" onchange="handler();">
				<option value="0.03"> 3%</option>
				<option value="0.04"> 4%</option>
				<option value="0.05"> 5%</option>
				<option value="0.06"> 6%</option>
				<option value="0.07"> 7%</option>
				<option value="0.08"> 8%</option>
				<option value="0.09"> 9%</option>
				<option value="0.1"> 10%</option>
			</select>
		</div>
		<div>
			<label>전체이자</label>
			<input type="number" name="money1">
		</div>
		<div>
			<label>납입원금</label>
			<input type="number" name="money2">
		</div>
		<div>
			<label>납입금액</label>
			<input type="number" name="money3">
		</div>
		<button type="button" onclick="handler()">계산하기</button>
	</form>
	
	<script type="text/javascript">
		function handler() {
			// 값을 조회/변경할 대상 엘리먼트 객체를 조회한다.
			var el1 = document.querySelector("[name=amount]");
			var el2 = document.querySelector("[name=months]");
			var el3 = document.querySelector("[name=rate]");
			var el4 = document.querySelector("[name=money1]");
			var el5 = document.querySelector("[name=money2]");
			var el6 = document.querySelector("[name=money3]");
			
			// 값을 조회한다.
			var 대출금액 = parseInt(el1.value);
			var 납입기간 = parseInt(el2.value);
			var 대출금리 = parseFloat(el3.value);
			
			var 총이자 = parseInt(대출금액*대출금리*(납입기간/12));
			var 납입원금 = 대출금액 + 총이자
			var 월납입액 = parseInt(납입원금/납입기간);
			
			el4.value = 총이자;
			el5.value = 납입원금;
			el6.value = 월납입액;			
		}
	</script>
</body>
</html>

<html>
<head>
<meta charset="UTF-8">
<title>체크박스, 라디오버튼의 체크 선택/해제</title>
</head>
<body>
	<h1>체크박스, 라디오버튼의 체크 선택/해제</h1>
	
	<form>
		<div>
			<label>전체 선택/해제</label>
			<input type="checkbox" id="checkbox-all-toggle" onchange="toggleAllCheckUncheck()">
		</div>
		<div>
			<label>보유기술</label>
			<input type="checkbox" name="skill" value="java" checked>자바
			<input type="checkbox" name="skill" value="python" checked="checked">파이썬
			<input type="checkbox" name="skill" value="c">C언어
			<input type="checkbox" name="skill" value="c++">C++
		</div>
	</form>
	
	<button onclick="uncheck();">체크박스 선택해제하기</button>
	<button onclick="check();">체크박스 선택하기</button>
	<button onclick="toggleCheck();">체크박스 선택해제 토글하기</button>
	<button onclick="checkAll();">체크박스 전부 선택하기</button>
	<button onclick="uncheckAll()">체크박스 전부 선택 해제하기</button>
	<button onclick="checkOneMore()">체크박스 선택된것이 하나이상 있는지 조사하기</button>
	
	
	<script type="text/javascript">
		function toggleAllCheckUncheck() {
			// 전체 선택/해제 체크박스의 체크상태를 조회하다.
			var el = document.querySelector("#checkbox-all-toggle");
			var currentChecked = el.checked;
			
			// 모든 보유기술 체크박스의 체크상태를 위에서 조회한 전체 선택/해제 체크박스의 체크상태와 같은 상태로 만든다.
			var collection = document.querySelectorAll('[name=skill]');
			for (var index = 0; index < collection.length; index++) {
				var el = collection[index];
				el.checked = currentChecked;
			}
		}
	
		function uncheck() {
			// 체크박스 자바를 선택해제하기
			var el = document.querySelectorAll('[name=skill]')[0];
			el.checked = false;
		}
		function check() {
			// 체크박스 자바를 해제하기
			var el = document.querySelectorAll('[name=skill]')[0];
			el.checked = true;
		}
		function toggleCheck() {
			// 체크박스 자바를 선택해제를 토글하기
			var el = document.querySelectorAll('[name=skill]')[0];
			el.checked = !el.checked
		}
		function checkAll() {
			// 체크박스 전체 선택하기
			var collection = document.querySelectorAll('[name=skill]');
			for (var index = 0; index < collection.length; index++) {
				var el = collection[index];
				el.checked = true;
			}
		}
		function uncheckAll() {
			// 체크박스 전체 선택하기
			var collection = document.querySelectorAll('[name=skill]');
			for (var index = 0; index < collection.length; index++) {
				var el = collection[index];
				el.checked = false;
			}
		}
	</script>
</body>
</html>