2017. 7. 3. 11:04ㆍJQuery
1. 핵심 DOM 객체
Node : 노드를 다루는 기본 기능과 속성을 제공하며, 노드를 탐색하고 조작할 때 사용합니다. Text : 텍스트 제어기능을 조작할 때 사용합니다. Attribute : 속성을 조작할 때 사용합니다. Document : Text, Element, Attribute등 노드를 생성하는 팩토리 메서드로 구성돼 있으며, 노드를 생성할 때 사용합니다. Element : HRML, XML 태그 요소의 기본기능과 속성을 제공하며, 속성과 이벤트를 제어할 때 사용합니다. HTMLDocument : Document 객체를 확장하여 HTML용 속성과 메서드를 추가한 객체로 body가 이 객체의 속성입니다. HTMLElement : Element 객체를 상속받은 HTML 태그 요소 전용으로 기본기능과 속성을 제공하여, id, class, name, style 등이 존재합니다. |
2. 노드란?
문서를 이루는 모든 요소를 통합하여 부르는 용어로서 노드에는 <body>, <div>, <img>, <table> 등이 있습니다.
|
3. Node 객체란?
노드를 조작하기 위한 가장 기본적인 프로퍼티와 메서드가 정의돼 있는 Node 인터페이스를 구현한 객체를 말합니다. 제공하는 기능을 이용하여 노드의 타입을 파악하거나 부모,형제,자식 노드를 찾아 접근하여 추가, 삭제, 교체를 할 수 있습니다. Node객체는 DOM 객체 가운데 가장 최상위 객체이자 모든 하위 노드 객체들이 상속받는 객체입니다. *기능요약 1. 노드타입을 파악 2. 부모,형제,자식 노드에 접근가능 3. 2번을 통해 접근한 노드를 추가,삭제,교체 |
4. Element 객체란?
주석, 텍스트 노드를 제외한 나머지 노드를 통합해서 부르는 용어입니다. Element도 노드의 한 종류이며 Element 인터페이스를 구현한 객체입니다. 또한, Node 객체의 자식으로서 Node가 가지고 있는 기능을 모두 사용할 수 있고, 추가로 HTML, XML의 태그 노드를 조작하는 기본적인 프로퍼티와 메서드를 포함하고 있습니다. *기능요약 1. Node의 기능을 수행함 2. 태그 이름이 담긴 프로퍼티와 속성을 파악하여 기능과 이벤트를 제어함 |
5. HTMLElement 객체란?
오직 HTML 문서에만 있는 노드를 통합하여 부르는 용어입니다. Element의 기능을 포함하여 HTML의 태그와 같은 HTML 태그에서만 쓸 수 있는 공통적인 속성과 기능이 포함돼 있습니다. HTMLDivElemtn, HTMLImageElement, HTMLBodyElement와 같은 객체의 부모 객체이기도 합니다. *기능요약 1. Node의 기능을 수행합 2. Element의 기능을 수행함 3. Id, ClassName 속성을 통해 제어함 4. 오프셋 위치와 관련된 속성을 통해 제어함 5. 마우스와 키보드 이벤트와 관련된 기능을 제어함
|
6. Document 객체란?
앞에서 말한 Node의 기능을 사용할 수 있으며, HTML문서와 XML 문서의 루트 객체로서 Element노드와 이벤트, 속성 노드, 텍스트 노드 등의 노드를 생성하는 팩토리 기능, Id, ClassName, TagName으로 특정 노드를 찾고 제어하는 기능, 이벤트를 제어하는 기능 등을 사용할 수 있는 중요한 객체입니다. *기능요약 1. Node의 기능을 수행함 2. 노드를 생성할 수 있음 3.이벤트를 생성하고 제어할 수 있음 4. Id,ClassName,tagName으로 특정 노드를 찾아 제어할 수 있음 |
7.HTMLDocument 객체란?
HTML 문서 전용 Document 객체를 말하는 용어입니다. body와 같은 HTML문서 전용 프로퍼티와 메서드가 포함돼 있으며 HTML 페이지 로딩 후 파싱단계에서 만들어진 html, head, body 등 페이지에 작성된 태그와 1:1 매칭되는 모든 Node 객체를 가지고 있습니다. *기능요약 1. Node의 기능을 수행함 2. Document의 기능을 수행함 3. getElementByName() 메서드를 통한 1:1 매칭 4. write(), open() 기능
|
8. 각 개체들의 주요 메서드
Dom 객체구분 |
Node |
Document |
HTMLDocument |
Element |
HTMLElement |
기 능 |
Node |
Node -> Document |
Node -> Document -> HTMLDocument |
Node -> Element |
Node -> Element -> HTMLElement |
주 요 메 서 드 |
hasAttribute() hasChildNodes() cloneNode() appendChild() insertBefore() removeChild() replaceChild() |
createAttribute() createElement() createEvent() createTextNode() Element getElementById() Elemet[] getElementsByTagNames() addEventListener() dispatchEvent() removeListener() |
close() open() write() Element[] getElementsByName() |
Element[] ElementsByTagName() hasAttribute() getAttribute() removeAttribute() setAttribute() addEventListener dipatchEvent() removeListener() |
onkeydown onkeypress onkeyup onclick ondbclick onmousedown onmousemove onmouseout onmouseover onmouseup |
'JQuery' 카테고리의 다른 글
| JQuery Select Box 제어 (0) | 2017.11.21 |
|---|---|
| 클릭한 태그 id, name, class, value 가져오기 (0) | 2017.11.21 |
| DOM과 HTML의 관계 (0) | 2017.06.25 |
| DOM(Document Object Model)이란? (0) | 2017.06.05 |
| Jqurey란? (0) | 2017.06.05 |