10일차_자바스크립트 DOM
Document Object Model -------------------------
1. HTML 객체, CSS 를 변경, 추가, 삭제 등을 할 수 있는 명령.
2. DOM Tree 개념
노드 - 엘리먼트, 속성, 텍스트의 상위 개념
엘리먼트 - 노드의 한 종류. 태그.
속성 - 노드의 한 종류. 태그 내의 속성.
텍스트 - 노드의 한 종류. 태그 내의 텍스트 값.
부모, 자식, 형제, 조상, 자손 관계
2. DOM 명령의 형태
document.getElementById("intro").innerHTML;
document : HTML 문서 전체에 대한 객체가 저장된 내장 변수
getElementById() : ID="" 속성을 기준으로 객체 검색.
innerHTML : 속성. Java에서 getter, setter 역할.
객체.속성 = 값; -> setter 역할
var 변수 = 객체.속성; -> getter 역할
HTML 태그 중에서 <input> 엘리먼트가 있다면
속성은 value, ... 등의 속성을 사용할 수 있다.
3. Document 객체가 지원하는 메소드 종류
document.getElementById() : Finding an element by element id
document.getElementsByTagName() : Finding elements by tag name
document.getElementsByName() : Finding elements by name
document.getElementsByClassName() : Finding elements by class name
document.createElement() : Create an HTML element
document.removeChild() : Remove an HTML element
document.appendChild() : Add an HTML element
document.replaceChild() : replace an HTML element
4. 기존 객체에 이벤트 동적 등록
객체.이벤트핸들러 = function() { 액션 코드 };
객체.이벤트핸들러 = 함수명;
function 함수명() {
액션 코드;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function() {
document.getElementById("btn").onclick=myFunction;
}
function myFunction() {
var kor = document.getElementById("kor");
var eng = document.getElementById("eng");
var mat = document.getElementById("mat");
var errObj = document.getElementById("err");
errObj.innerHTML = "";
//데이터 검사
//패턴 검사, 숫자 검사, 범위 검사
if ( (kor.value=="" || eng.value=="" || mat.value=="")
|| (kor.value.match(/[^0-9]/) || eng.value.match(/[^0-9]/) || mat.value.match(/[^0-9]/))
|| (parseInt(kor.value)>100 || parseInt(eng.value)>100 || parseInt(mat.value)>100) ) {
//에러메시지 출력
errObj.innerHTML = "잘못된 입력입니다.";
return;
}
//문자열 결합 연산
//var tot = kor.value + eng.value + mat.value; //getter 역할
//산술적 더하기 연산
var tot = parseInt(kor.value) + parseInt(eng.value) + parseInt(mat.value); //getter 역할
var ave = tot / 3.0;
document.getElementById("tot").value = tot; //setter 역할
document.getElementById("ave").value = ave; //setter 역할
}
</script>
</head>
<body>
<div>
<h1>성적 처리</h1>
<form >
<table>
<tr>
<td>국어(0~100)</td>
<td><input type="text" id="kor" name="kor"></td>
</tr>
<tr>
<td>영어(0~100)</td>
<td><input type="text" id="eng" name="eng"></td>
</tr>
<tr>
<td>수학(0~100)</td>
<td><input type="text" id="mat" name="mat"></td>
</tr>
<tr>
<td>총점</td>
<td>
<!-- readonly="readonly" 속성을 지정하면 읽기 전용 상태가 된다. 액션 처리 가능. -->
<!-- disabled="disabled" 속성을 지정해도 읽기 전용 상태를 만들 수는 있다. 액션 처리 불가. -->
<input type="text" id="tot" readonly="readonly"
value="">
</td>
</tr>
<tr>
<td>평균</td>
<td><input type="text" id="ave" readonly="readonly"
value=""></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="점수계산" id="btn">
<span id="err"></span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function() {
document.getElementById("btn").onclick=myFunction;
}
function myFunction() {
var kor = document.getElementById("kor");
var eng = document.getElementById("eng");
var mat = document.getElementById("mat");
//문자열 결합 연산
//var tot = kor.value + eng.value + mat.value; //getter 역할
//산술적 더하기 연산
var tot = parseInt(kor.value) + parseInt(eng.value) + parseInt(mat.value); //getter 역할
var ave = tot / 3.0;
document.getElementById("tot").value = tot; //setter 역할
document.getElementById("ave").value = ave; //setter 역할
}
</script>
</head>
<body>
<div>
<h1>성적 처리</h1>
<form >
<table>
<tr>
<td>국어(0~100)</td>
<td>
<!-- <input type="number">는 HTML5 전용 태그 -->
<!-- required="required" 필수 입력 항목 지정시 사용. 서브밋 액션과 연동된다. HTML5 전용 속성. -->
<input type="number" id="kor" name="kor"
min="0" max="100" required="required">
</td>
</tr>
<tr>
<td>영어(0~100)</td>
<td><input type="number" id="eng" name="eng"
min="0" max="100"></td>
</tr>
<tr>
<td>수학(0~100)</td>
<td><input type="number" id="mat" name="mat"
min="0" max="100"></td>
</tr>
<tr>
<td>총점</td>
<td>
<!-- readonly="readonly" 속성을 지정하면 읽기 전용 상태가 된다. 액션 처리 가능. -->
<!-- disabled="disabled" 속성을 지정해도 읽기 전용 상태를 만들 수는 있다. 액션 처리 불가. -->
<input type="text" id="tot" readonly="readonly"
value="">
</td>
</tr>
<tr>
<td>평균</td>
<td><input type="text" id="ave" readonly="readonly"
value=""></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="점수계산" id="btn">
<span id="err"></span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
//Sample14.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('First paragraph inside "main" is ' + y[0].innerHTML);
</script>
</body>
</html>
5. 기존 객체의 콘텐츠 변경
객체.innerHTML=new HTML;
객체.innerText=new Text;
6. 기존 객체의 속성 값 변경
객체.attribute=new value;
7. CSS 속성 값 변경
객체.style.property=new style;
//Sample15.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function () {
document.getElementById("btn").onclick=changeStyle;
};
function changeStyle() {
var pObj = document.getElementById("p1");
pObj.style.color = "blue";
pObj.style.fontSize = "x-large"; //CSS에서 font-size인 경우는 fontSize로 표현.
pObj.style.fontWeight = "bold"; //CSS에서 font-weight인 경우는 fontWeight로 표현.
}
</script>
</head>
<body>
<div>
<p id="p1">Hello World!</p>
<form>
<input type="button" value="스타일 변경"
id="btn">
</form>
</div>
</body>
</html>
8. 마우스 이벤트
- onmouseover, onmouseout
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//문제) 마우스 관련 이벤트(onmouseover, onmouseout) 등록
window.onload=function() {
document.getElementById("target").onmouseover=function() {
mOver(this);
};
document.getElementById("target").onmouseout=function() {
mOut(this);
};
}
function mOver(obj) {
//CSS 표현에서는 background-color 속성 사용
obj.style.backgroundColor = "#6CFF6C";
obj.innerHTML = "Tankyou!";
}
function mOut(obj) {
obj.style.backgroundColor = "#D94A38";
obj.innerHTML = "Mouse Over Me";
}
</script>
</head>
<body>
<div>
<div style="background-color: #D94A38; width: 120px; height: 20px; padding: 40px;"
id="target">
Mouse Over Me</div>
</div>
</body>
</html>
9. 노드 탐색
- nodeName, nodeValue, nodeType(종류 1-element, 2-attribute, 3-text)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function nodeAccess() {
//<div id="main">
var divObj = document.getElementById("main");
//<p>,...,<p>
var pObjs = divObj.getElementsByTagName("p");
//<p>The DOM is very useful.</p>
var pObj = pObjs[0];
//Text Node("The DOM is very useful.")
var textObj = pObj.firstChild;
//"The DOM is very useful."
var text = textObj.nodeValue;
//"The DOM is very useful."
alert(text);
}
function myFunction() {
//문제)
//<b>getElementsByTagName</b> 엘리먼트에 있는
//문자열 데이터를 노드 탐색하는 과정 추가
//<div id="main">
var divObj = document.getElementById("main");
//<p>,...,<p>
var pObjs = divObj.getElementsByTagName("p");
//<p>This example demonstrates the <b>getElementsByTagName</b> method </p>
var pObj = pObjs[1];
//<b>getElementsByTagName</b>
var bObj = pObj.firstElementChild;
//"getElementsByTagName"
alert(bObj.firstChild.nodeValue);
}
</script>
</head>
<body>
<div>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the
<b>getElementsByTagName</b>
method
</p>
</div>
<form>
<input type="button"
value="엘리먼트 접근"
onclick="myFunction()">
</form>
</div>
</body>
</html>
10. 노드 생성
- createElement(), createTextNode(), appendChild()
//Sample18.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function nodeCreate() {
//엘리먼트 노드 생성
//<p></p>
var pNode = document.createElement("p");
//텍스트 노드 생성
//TextNode("This is another paragraph.")
var textNode = document.createTextNode("This is another paragraph.");
//엘리먼트 노드 자식으로 텍스트 노드를 지정.
//<p>This is another paragraph.</p>
//부모(엘리먼트)-자식(텍스트)
pNode.appendChild(textNode);
//<div id="main">
var divObj = document.getElementById("main");
//기존 노드에 엘리먼트 노드를 자식으로 등록
//<div id="main"> ... <p>This is another paragraph.</p></div>
//부모(엘리먼트)-자식(엘리먼트)
divObj.appendChild(pNode);
}
</script>
</head>
<body>
<div>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>
This example demonstrates the <b>getElementsByTagName</b> method
</p>
</div>
<form>
<input type="button"
value="엘리먼트 생성"
onclick="nodeCreate()">
</form>
</div>
</body>
</html>
----------------------------
문제) 버튼 두 개를 만들고
, 하나는 숫자 증가, 하나는 숫자 감소 기능을 작성합니다.
숫자는 처음에는 0부터 출발합니다.
(숫자 증가는 10까지만 증가하고 버튼 비활성
, 숫자 감소는 0까지만 감소하고 버튼 비활성 되도록
기능 추가)
-> Javascript DOM 명령 이용.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
//문제)
//HTML DOM 명령 이용할 것.
//div 태그 안에 있는 기존 텍스트 노드를 새로운 텍스트 노드로 교체한다.
//->replaceChild()
</script>
</head>
<body>
<div>
<div id="count" style="border:1px #D94A38 dashed; width: 160px; text-align:center; padding-top: 30px; padding-bottom: 30px; font-size:24pt;">0</div>
<form>
<input type="button"
value="숫자 증가" id="increase">
<input type="button"
value="숫자 감소" id="decrease">
</form>
</div>
</body>
</html>
----------------------------------
요약
1. DOM : HTML 객체, CSS 를 변경, 추가, 삭제 등을 할 수 있는 명령
2. DOM Tree 개념
3. 노드 검색, 추가, 삭제, 변경