본 수업은 폐지 예정입니다. 자바스크립트 언어 수업과 웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.
Dom - (document object model)
- 자바스크립트는 Dom을 통해서 HTML을 제어한다.
- 문서에 프로그래밍적으로 엑세스하고 변형하기 위한 프로그래밍 인터페이스.
- Dom처리의 일반적인 순서
- 제어할 대상을 찾는다. - getElementById(), getElementsByName(), getElementsByTagName()
- 대상이 가지고 있는 메소드를 실행하거나, 이벤트 핸들러를 설치한다.
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>
DOM을 이용한 예제들
http://www.w3schools.com/htmldom/dom_examples.asp
