DOM

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업과 웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

Dom - (document object model)

자바스크립트는 Dom을 통해서 HTML을 제어한다.
문서에 프로그래밍적으로 엑세스하고 변형하기 위한 프로그래밍 인터페이스.
Dom처리의 일반적인 순서
1. 제어할 대상을 찾는다. - getElementById(), getElementsByName(), getElementsByTagName()
2. 대상이 가지고 있는 메소드를 실행하거나, 이벤트 핸들러를 설치한다.

Dom Object

DOM Document - 문서를 제어하기 위한 API
DOM Events - 엘리먼트가 공통적으로 가지고 있는 이벤트
DOM Elements - 엘리먼트가 공통적으로 가지고 있는 API

다음 객체들은 위의 Dom Events, Elements 의 API 외에 엘리먼트의 특성에 따라 추가되는 API 리스트임
DOM Anchor
DOM Area
DOM Base
DOM Body
DOM Button
DOM Form
DOM Frame/IFrame
DOM Frameset
DOM Image
DOM Input Button
DOM Input Checkbox
DOM Input File
DOM Input Hidden
DOM Input Password
DOM Input Radio
DOM Input Reset
DOM Input Submit
DOM Input Text
DOM Link
DOM Meta
DOM Object
DOM Option
DOM Select
DOM Style
DOM Table
DOM TableCell
DOM TableRow
DOM Textarea

주요한 엘리먼트 메소드

제어 할 대상을 탐색

엘리먼트를 생성

document.createElement
document.createTextNode

엘리먼트를 제어

element.appendChild
element.setAttribute
element.getAttribute
element.innerHTML

예제

example1.html (jsfiddle, github)

document.getElementById 를 이용해서 엘리먼트를 선택
특수한 엘리먼트(DOM input text)의 속성(value)에 접근해서 값을 가져옴
가져온 값을 div의 내용으로 추가

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script type="text/javascript">
			function sync() {
				// title 엘리먼트를 찾는다.
				var title = document.getElementById('title');
				// output 엘리먼트를 찾는다.
				var output = document.getElementById('output');
				// output 엘리먼트안에 title의 값을 삽입한다.
				output.innerHTML = title.value;
			}
		</script>
	</head>
	<body>
		<div style="background-color: gray;" id="output">
			output
		</div>
		<input type="text" value="egoing" id="title" onchange="sync()">
		<script>
			sync();
		</script>
	</body>
</html>

example2.html (jsfiddle, github)

document.getElementsByTagName을 이용해서 엘리먼트를 선택
이 때 리턴 값은 여러개이기 때문에 배열(array)에 담겨짐
엘리먼트의 class를 동적으로 변경해서 미리정의된 스타일시트의 설정을 동적으로 적용

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			.red {
				background-color: red;
			}
			.blue {
				background-color: blue;
			}
			.green {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div>
			red
		</div>
		<div>
			blue
		</div>
		<div>
			green
		</div>
		<input type="button" value="color" onclick="colorize()" />
		<script type="text/javascript">
			function colorize() {
				var divs = document.getElementsByTagName('div');
				for(var i = 0; i < divs.length; i++) {
					divs[i].setAttribute('class', divs[i].innerHTML)
				}
			}
		</script>
	</body>
</html>

example3.html (jsfiddle, github)

	<html>
	    <style type="text/css">
	        .hide{display:none}
	        #menu{
	            padding-left:0;
	        }
	        #menu li{
	            float:left;
	            margin-left:20px;
	        }
	        #canvas{
	            clear:both;
	        }
	    </style>
	    <body>
	        <ul id="menu">
	            <li><a id="gogh" href="#tab1">고흐</a></li>
	            <li><a id="gaudi" href="#tab2">가우디</a></li>
	            <li><a id="albrecht" href="#tab3">알브레히트 뒤러</a></li>
	        </ul>
	        <div id="canvas">
	            <div id="gogh_img">
	                <img src="http://farm3.static.flickr.com/2435/3687464186_5ca34c866c.jpg" />
	            </div>
	            <div class="hide"  id="gaudi_img">
	                <img src="http://farm2.static.flickr.com/1027/5184060937_679f620225.jpg" />
	            </div>
	            <div class="hide"  id="albrecht_img">
	                <img src="http://farm5.static.flickr.com/4084/4979876994_5bce879910.jpg" />
	            </div>
	        </div>
	        <script type="text/javascript">
	            function addEvent(el, eType, fn, uC) {
	                if (el.addEventListener) {
	                    el.addEventListener(eType, fn, uC);
	                    return true;
	                } else if (el.attachEvent) {
	                    return el.attachEvent('on' + eType, fn);
	                } else {
	                    el['on' + eType] = fn;
	                }
	            }
	            function clickHandler(e){
	                var id = e.target.id;
	                var t = document.getElementById(e.target.id+'_img');
	                var p = document.getElementById('canvas');
	                for(var i = 0 ; i < p.childNodes.length ; i ++){
	                    var c = p.childNodes[i];
	                    if(c.nodeName == 'DIV'){
	                        c.setAttribute('class', 'hide');
	                    }
	                }
	                t.setAttribute('class', '');
	            }
	            addEvent(document.getElementById('gogh'), 'click', clickHandler)
	            addEvent(document.getElementById('gaudi'), 'click', clickHandler)
	            addEvent(document.getElementById('albrecht'), 'click', clickHandler)
	        </script>
	    </body>
	</html>

example4.html (jsfiddle, github, 예제출처)

<html>
	<head>
		<title>||Working with elements||</title>
	</head>

	<script type="text/javascript">
		var my_div = null;
		var newDiv = null;

		function addElement() {
			// create a new div element
			// and give it some content
			newDiv = document.createElement("div");
			newContent = document.createTextNode("Hi there and greetings!");
			newDiv.appendChild(newContent);
			//add the text node to the newly created div.

			// add the newly created element and it's content into the DOM
			my_div = document.getElementById("org_div1");
			document.body.insertBefore(newDiv, my_div);
		}
	</script>

	<body onload="addElement()">
		<div id='org_div1'>
			The text above has been created dynamically.
		</div>
	</body>
</html>