categorized under 웹이야기 & written by cryinglemon
|
DOM 이란? |
- 트리 형태의 구조를 가진 텍스트 문서의 각종 구성요소를 일정 규칙에 의해 각각의 객체로 만들고 각 요소간의 상관관계정보를 추가하여 문서를 모형화 시키는 규격을 말한다.
- W3C DOM 표준은 3가지로 구분한다
- Core DOM - 모든 구조화된 문서의 표준 모델
- XML DOM - XML문서 표준모델
- HTML DOM - HTML문서 표준모델
- HTML5에서 볼 DOM은 HTML DOM 인데, HTML DOM 이란 javascript API 형태를 이용하여 문서 내의 특정 요소를 추출하거나 삽입, 삭제, 이동에 대한 방법을 표준한다.
|
DOM의 구조 |
[HTML DOM Tree]
DOM에서는 문서의 모든 구성원이 각각의 객체로 인식되며 이러한 객체 하나하나를 노드(Node)라고 한다.
[Node Parents, Children, and Siblings]
-
노드트리는 서로 다른 계층 관계에 있있다.
-
부모,자식,형제 관계로 설명한다.
-
노드 트리중 최상위 노드를 루트라고 칭한다.
-
모든 노드는 루트를 제외하고 하나의 부모가 있다.
-
같은 수준의 노드는 형제 노드라고 칭한다.
| 노드(Node)의 종류 |
노드는 총 12가지로 정의 되어있으나 대표적으로 쓰는 5가지를 정리해 본다.
-
Document Node - 최상위 객체로 문서 자체를 의미한다.
-
Element Node - 태그로 이루어진 노드를 의미한다. (head / body/ h1... 등등)
-
Attribute Node - 태그의 속성값으로 이루어진 노드를 의미한다. (lang="ko" / charset="UTF-8" / id="title" 등등)
-
Text Node - 태그 사이에 기술되는 텍스트 형태의 노드를 의미한다.
|
노드 메소드(Node Methodes) |
노드생성
|
속성 노드 생성 |
createAttribute() |
|
요소 노드 생성 |
createElement() |
|
텍스트 노드 생성 |
createTextNode() |
노드찾기
|
id를 이용 |
getElementById() |
|
태그명 이용 |
getElementsByTagName() |
|
class를 이용 |
getElementsByClassName() |
|
트리구조로 구성된 노드간의 관계를 이용 |
childNodes : NodeList firstChild : 첫번째 자식노드 lastChild : 마지막 자식노드 parentNode : 부모자식노드 previousSibling 바로 앞의 형제 노드 nextsibling : 바로 뒤에 형제 노드 |
|
css셀렉터을 이용 |
getSelector(), getSelectorAll() |
그외 노드 메소드
|
노드 추가 |
appendChild() |
|
노드 삭제 |
removeChild() |
|
노드 변경 |
replaceChild() |
|
노드 삽입 |
insertBefore() |
|
HTML5에서 추가된 DOM API |
innerHTML 속성
-
document나 요소 노드 내부의 HTML 코드가 문자열로 저장되어있는 속성
-
HTML 요소 내용을 얻거나 교체 할떄 유용하다.
구문)
var content = element.innerHTML; element.innerHTML = contents;
outerHTML 속성
-
요소 자신을 포함한 내부의 HTML 코드가 문자열로 저장 되어있다.
-
innerHTMl과 사용법은 동일
구문)
var content = element.outerHTML; element.outerHTML = content;
예시)
<html>
<body>
<p id="intro">Hello World!<⁄p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
<⁄script>
<⁄body>
<⁄html>
classList 속성 [소스참고]
-
요소의 class속성을 다룰수 있는 다양한 기능을 가진 객체가 저장되어있다.
|
length |
class 속성에 지정된 class개수 |
|
add(string) |
class 추가 |
|
contains(string) |
class속성에 포함되어 있는지 여부 반환 |
|
item(index) |
해당 index에 있는 class값 반환 |
|
remove(string) |
class 삭제 |
|
toggle(string) |
class가 있을 경우 삭제 없을 경우 추가 |
구문)
var elementClasses = elementNodeReference.classList;
예시)
⁄⁄ div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
⁄⁄ if visible is set remove it, otherwise add it
div.classList.toggle("visible");
alert(div.classList.contains("foo"));
insertAdjacentHTML 메소드 [소스참고]
-
지정한 HTML코드를 요소의 근접한 위치에 삽입한다.
-
문서가 로딩되는 동안은 삽입될수 없다.
-
position 값을 아래 표와 같다.
|
beforebegin |
요소의 시작태그 바로 앞에 삽입 |
|
afterbegin |
요소의 시작태그 바로 뒤에 삽입 |
|
beforeend |
요소의 종료태그 바로 앞에 삽입 |
| afterend |
요소의 종료태그 바로 뒤에 삽입 |
구문)
element.insertAdjacentHTML(position, html);
예시)
⁄⁄ <div id="one">one<⁄div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two<⁄div>');
⁄⁄ At this point, the new structure is:
⁄⁄ <div id="one">one<⁄div><div id="two">two<⁄div>
getElementsByClassName 메소드
-
메소드 지정한 class 속성을 포함하는 요소 노드를 찾아서 반환
구문)
elements = document.getElementsByClassName(names);
querySelector/querySelectorAll 메소드 [소스참고1,소스참고2]
-
css 셀렉터를 이용하여 노드를 찾을 때 까지 이용하는 메소드
구문)
element = document.querySelector(selectors); element = document.querySelectorAll(selectors);
'웹이야기' 카테고리의 다른 글
| [매일 HTML5 공부 13] Canvas요소 (0) | 2013.05.21 |
|---|---|
| [매일 HTML5 공부 12] Audio와 Video 요소 (0) | 2013.05.17 |
| [매일 HTML5 공부 10] 새로운 API 기능들 (0) | 2013.05.13 |
| [매일 HTML5 공부 09] input요소에 추가된 타입과 속성 (0) | 2013.05.10 |
| [매일 HTML5 공부 08] 폼(form) 관련 요소 (0) | 2013.05.09 |
