자바스크립트 DOM 객체의 주요 기능 정리

jQuery는 노드를 추가/삭제/이동한다거나 글자 색을 변경하는 등의 작업을 처리할 때 아래에 나와 있는 자바스크립트 DOM 객체들의 프로퍼티와 메서드를 사용해 처리한다. jQuery는 단지 자바스크립트 DOM 기능을 쉽게 해주는 라이브러리라는 점을 꼭 기억해야 한다.

DOM객체 구분

Node, Document, HTMLDocument, Element, HTMLElement

상속구조

1. Node : Node
2. Document : Node → Document
3. HTMLDocument : Node → Document → HTMLDocument
4. Element : Node → Element
5. HTMLElement : Node → Element → HTMLElement

기능

1. Node : 노드를 탐색하고 조작하는 기본적인 프로퍼티와 메서드
2. Document : 텍스트 노드, 엘리먼트 노드를 생성하는 팩토리 메서드
3. HTMLDocument : HTML 문서 전용 프로퍼티와 메서드
4. Element : 속성을 다루는 기능, 이벤트 모델 구현
5. HTMLElement : HTML 태그 전용 프로퍼티와 메서드

주요 프로퍼티

1. Node
   Attr[] attributes
   Node[] childNodes
   Node firstChild
   Node lastChild
   Node nextSibling
   Node previousSibling
   Node parentNode
   String nodeValue
   String nodeName
   unsigned short nodeType
2. HTMLDocument
   HTMLElement body
   String cookie
   HTMLCollection images
   HTMLCollection links
3. Element
   String tagName
4. HTMLElement
   String className
   String id
   String innerHTML
   CSS2Properties style
   int offsetWidth
   int offsetHeight
   int offsetLeft
   int offsetTop

주요 메서드

1. Node
   hasAttributes()
   hasChildNodes()
   cloneNode()
   appendChild()
   insertBefore()
   removeChild()
   replaceChild()
2. Document
   createAttribute()
   createElement()
   createEvent()
   createTextNode()
   Element
   getElementById()
   addEventListener()
   dispatchEvent()
   removeListener()
3. HTMLDocument
   close()
   open()
   write()
   Element[]
   getElementByName()
4. Element
   Element[]
   ElementByTagName()
   hasAttribute()
   getAttribute()
   removeAtttribute()
   setAttribute()
   addEventListener()
   dispatchEvent()
   removeListener()
5. HTMLElement
   onkeydown
   onkeypress
   onkeyup
   onclick
   ondbclick
   onmousedown
   onmousemove
   onmouseout
   onmouseover
   onpouseup