출처 : http://www.w3schools.com/htmldom/default.asp
HTML DOM Introduction
What is the DOM
- W3C standard
- HTML 이나 XML 을 접속하는 표준.
- DOM 은 Document Object Model 의 약자.
- program 이나 script 가 동적으로 document 의 내용, 구조, 스타일 등을 access 혹은 update 할 수 있도록 도와주는 언어체계
- DOM은 크게 3개의 part 로 나누어진다.
1. Core DOM ( any structure )
2. XML DOM ( XML structure )
3. HTML DOM ( HTML structure )
- DOM은 모든 document element의 object와 property, methods를 정의하고 접근할 수 있다.
What is the HTML DOM
- HTML의 표준 object model 이다.
- HTML의 표준 프로그래밍 인터페이스이다.
- Platform, language independent 하다.
- W3C 표준이다.
- 한마디로 HTML DOM은 HTML elements 들의 접근, 변경, 추가, 삭제의 표준 방법. ( CRUD )
HTML DOM Nodes
DOM Nodes
- HTML document 의 모든 것은 node 이다.
- 전체 document는 document node.
- 모든 HTML element는 element node.
- HTML elements의 text는 text node.
- 모든 HTML attribute 는 attribute node.
- 주석은 comment nodes.
Text is Always Stored in TextNodes
- 기본적으로 착각하기 쉬운 것이 text 가 element node 에 포함된다는 생각.
HTML DOM Node Tree
The HTML DOM Node Tree
- HTML DOM views 는 tree-structure 로 되어 있고 이것을 node-tree라 한다.
- 모든 노드는 tree를 통해 접근할 수 있다. 내용물은 CRUD가 가능하다.
Node Parents, Children, and Sibilings
- 노드 트리에서 최상단 노드는 root.
- 모든 노드는 정확히 한 부모만을 가진다. ( root 제외 )
- 노드는 수없이 많은 자식을 가질 수 있다.
- leaf 는 자식이 없는 노드를 말한다.
- siblings 는 같은 부모를 가진 노드들을 말한다.
First Child - Last Child
HTML DOM Properties and Methods
Programming Interface
- HTML documents는 노드 오브젝트들로 구성되어 있다. 노드들은 JavaScript나 다른 프로그래밍 언어에 의해 접근 가능하다. 튜토리얼에서는 JS를 사용한다.
- property는 get/set 할 수 있는 value를 말한다.
- method 는 무엇인가를 할 수 있는 것을 말한다.
HTML DOM Properties
- x.innerHTML : x의 text value.
- x.nodeName : x의 이름
- x.nodeValue : x의 값.
- x.parentNode : x의 parent node.
- x.childNodes : x의 child nodes.
- x.attributes : x의 attributes
여기서 x는 node object( HTML element )
HTML DOM Methods
- x.getElementById( id ) : id를 통해 특정 element를 불러온다.
- x.getElementsByTagName( name ) : tag name을 가진 모든 element를 받는다.
- x.appendChild( node ) : 새로운 노드를 x 에 추가한다.
- x.removeChild( node ) : x에서 존재하는 node를 제거한다.
x는 node object( HTML element )
The innerHTML Property
- innerHTML property를 이용하는 것이 가장 쉬운 내용 변경방법.
- innerHTML은 W3C DOM spec 은 아니지만, 대부분의 브라우저에서 지원.
- innerHTML은 동적으로 내용을 변경하거나, 동적으로 변경된 소스를 볼 때 좋다.
ChildNodes and NodeValues
- innerHTML 대신에 childNodes[0].nodeValue property를 사용해도 된다.
HTML DOM Access Nodes
Accessing Nodes
- 다음 세가지 방법으로 Node 에 접근할 수 있다.
1. getElementById()
2. getElementsByTagName()
3. nodeTree를 돌아보며 node의 관계를 이용하여.
The getElementById() Method
syntax:
node.getElementById( "id" );
The getElementByTagName() Method
syntax:
node.getElementsByTagName( "tagname" );
DOM Node List
- getElementsByTagName() 은 node-list를 리턴하며 이는 array 형태이다.
DOM Node List Length
x.length 를 통해서 접근 가능
여기서 x는 node list
Navigating Node Relationships
- x.prrentNode
- x.firstChild
- x.lastChild
x는 DOM Object
DOM Root Nodes
- document.documentElement 는 document의 root node 를 return 한다.
- document.body 는 <body> tag를 바로 access할 수 있다.
HTML DOM Node Information
Node Properties
- HTML DOM에서 모든 node 는 object 이다.
- object 는 method 와 property를 가질 수 있고, JS를 통해서 접근 및 조작 가능하다.
- 중요한 프로퍼티들은 다음과 같다.
1. nodeName
2. nodeValue
3. nodeType
The nodeName Property
- nodeName 은 read-only
- element node의 nodeName 은 tag name 과 같다.
- attribute node의 nodeName은 attribute name과 같다.
- text node의 nodeName 은 항상 #text 이다.
- document node의 nodeName은 항상 #document 이다.
The nodeValue Property
- element node의 nodeValue는 undefined
- text node의 nodeValue는 text
- attribute node의 nodeValue 는 attribute value.
The nodeType Property
- nodeType 은 read-only
- Element : 1
- Attribute : 2
- Text : 3
- Comment : 8
- Document : 9
HTML DOM - Change HTML Elements
Change an HTML Element
Change the Text of an HTML Element - innerHTML
Change an HTML Element Using Events
- Event handler 는 event 가 발생했을 때 코드를 실행한다.
- element에 click, page load 등의 event가 발생한 경우에 callback 을 호출하거나, 구문을 수행한다.
<html>
<body>
<input type="button" onclick="document.body.bgColor='lavender';"
value="Change background color" />
</body>
</html>
Change the Text of an Element - with a Function
<html>
<head>
<script type="text/javascript">
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
</head>
<body>
<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeText()" value="Change text" />
</body>
</html>
Using the Style Object
<html>
<head>
<script type="text/javascript">
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
</head>
<body>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Change the font and color of an Element
HTML DOM - Events
Events
- 모든 web page element는 특정한 event를 가지고 있고, 이걸 기반으로 JS function 을 연결할 수 있다.
- event 의 예제는..
1. mouse click
2. web page or image loading
3. web page 특정부분의 mouse over.
4. HTML form의 input box 선택.
5. HTML form submit.
6. keystroke
onload and onUnload
- onload와 onUnload는 각각 user 가 page 에 입장하는 순간과 떠나는 순간 발생한다.
- onload는 종종 방문자의 브라우저 타입, 버전을 체크하여 적합한 웹페이지를 띄우는데 사용된다.
- onload와 onUnload는 종종 cookies와 연동되어 사용된다.
onFocus, onBlur, and onChange
- onFocus, onBlur, onChange는 종종 form field 값의 validation을 위해 조합되어 사용된다.
Event Reference
Mouse Events
- onclick
- ondblclick
- onmousedown
- onmousemove
- onmouseoever
- onmouseout
- onmouseup
Keyboard Events
- onkeydown
- onkeypress
- onkeyup
Frame/Object Events
- onabort :<object>에 image가 완전히 로드되는 것이 정지되었을 때.
- onerror : <object>, <body>, <frameset>에 이미지가 로드되는 것이 실패했을 때.
- onload : document, frameset, object 가 load 되었을 때
- onresize : document view 가 resize 되었을 때
- onscroll : document view가 scrolled 되었을 때
- onunload : <body>, <frameset> 이 unload 되었을 때
Form Events
- onblur : focus 상실
- onchange : <input>, <select>, <textarea> 에 내용 변화시
- onfocus : <label>, <input>, <select>, <textarea>, <button>에 focus 받았을 때
- onreset : reset되었을 때
- onselect : <input>, <textarea> 의 text 일부분이 선택되었을 때
- onsubmit : form 이 submit되었을 때
Event Object Properties
- bubbles
- cancelable
- currentTarget : event trigger한 eventListener를 가진 element return
- eventPhase
- target : event를 trigger한 element return
- timeStamp
- type : event name
Event Object Methods
- initEvent() : event type, bubble, default action prevent등을 정함.
- preventDefault() : cancelable일 경우 event를 cancel 하여 기본 action 이 일어나지 않도록 한다.
- stopPropagation() : propagation을 멈춘다.
EventTarget Object
- addEventListener()
- dispatchEvent()
- removeEventListener()
EventListener Object
- handleEvent()
DocumentEvent Object
- createEvent()
MouseEvent/KeyboardEvent Object Properties
- altKey
- button
- clientX : current window 기준
- clientY
- ctrlKey
- keyIdentifier
- keyLocation
- metaKey
- relatedTarget : event를 trigger한 element와 관련된 element return
- screenX
- screenY
- shiftKey
MouseEvent/KeyboardEvent Object Methods
- initMouseEvent()
- initKeyboardEvent()
References
- HTML DOM Object Reference
http://www.w3schools.com/jsref/default.asp
- HTML DOM Examples
http://www.w3schools.com/htmldom/dom_examples.asp
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [Script] jQuery Reference Full version. (2) | 2012.09.26 |
|---|---|
| [Script] jQuery Tutorial ( 기초 강좌 ) (0) | 2012.09.26 |
| [Script] Backbone.js Tutorial ( 기초강좌 ) - Collection. (3) | 2012.09.25 |
| [Script] Backbone.js Tutorial ( 기초 강좌 ) - Router (5) | 2012.09.25 |
| [Script] Backbone.js Tutorial ( 기초강좌 ) - View (3) | 2012.09.24 |
댓글