본 수업은 폐지 예정입니다. 자바스크립트 언어 수업과 웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.
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의 내용으로 추가
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!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를 동적으로 변경해서 미리정의된 스타일시트의 설정을 동적으로 적용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | < 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" > </ div > < div class = "hide" id = "gaudi_img" > </ div > < div class = "hide" id = "albrecht_img" > </ 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, 예제출처)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | < 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