DOM, 즉 Document Object Model은 문서를 객체로 표현하기 위한 표준으로서

HTML이나 XML 등의 문자를 객체로 표현할 때 사용하는 API이다.


DOM API는 문서를 트리 구조로 표현하기 때문에 쉽게 이해할 수 있다.



Document : 전체문서를 나타낸다.

Element : 각 태그를 나타낸다. <books>나 <book>과 같이 태그에 해당하는 노드가 Element로 매핑된다.

Text : 문자열 데이터가 Text 노드로 표현한다. 예를 들어, '<title>웹 표준</title>' 에서 '웹 표준' 문자열은 Text 노드에 저장

CDataSection : XML 문서의 CDATA 영역의 문자열 값을 저장한다.


* CDATA 섹션이라는 것은 말 그대로 문자 데이터를 그대로 표현하는 것을 말한다.

<![CDATA[ ..... ]]>

CDATA 섹션 내에 표현한 문자나 기호는 태그 형식이나 코드로 인식하지 않고 그대로 문자형식으로 취급한다. 

즉 XML 파서에게 이 부분은 해석하지 말고 그대로 표현하라고 명시하는 것이다. 

다만 CDATA 섹션을 사용할 때 주의할 점은 <![CDATA[ 사이에 공백이 없어야 하고 끝부분 ]]> 에도 공백이 없어야 한다.


주의할점

1) <![CDATA[ ... ]]> 에 공백을 쓸 수 없다.

2) CDATA 섹션 안에 CDATA 섹션을 포함하지 않아야 한다.

3) 키워드 CDATA는 반드시 대문자를 사용한다.

4) CDATA 구역은 요소 컨텐츠 내의 문자 데이터 어디에나 삽입할 수 있다.(단, XML 마크업 태그 내에서는 사용할 수 없다.)



-Node 인터페이스의 주요 프로퍼티

Node 인터페이스는 Element, Document, Text 등 주요 인터페이스가 상속받는 부모 인터페이스로서

DOM API를 사용하는데 있어 가장 기본이 되는 인터페이스 이다.

프로퍼티 타입

프로퍼티 이름

설    명 

String 

nodeName

노드의 이름   - nodeName("노드의 이름")

String

nodeValue

노드의 값   - nodeValue("노드의 값")

unsigned short

nodeType

노드타입 

Node

parentNode 

부모 노드 

NodeList

childNodes 

자식 노드 목록 

Node

firstChild 

첫 번째 자식 노드 

Node

lastChild 

마지막 자식 노드 

Node

previousSibling

현재 노드와 같은 부모를 갖는 자식 노드 중

현재 노드 이전의 자식 노드

Node

nextSibling 

현재 노드와 같은 부모를 갖는 자식 노드 중

현재 노드 다음의 자식 노드 

 Document

ownerDocument

이 노드가 포함된 Document 객체 


* NodeList 는 childNodes로 구한 자식 노드에 접근할 수 있도록 하기 위해 다음의 두가지를 제공

1) length - NodeList에 저장된 노드의 개수 (NodeList의 길이)

2) item(i) - 인덱스 i에 저장된 노드를 구함 (i는 0부터 시작)


예를 들어,

자식 노드에 차례대로 접근하고 싶을 때


var bookChildNodes = leftBook.childNodes;

for (var i = 0; i < bookChildNodes.length; i++) {

var childNode = bookChildNodes.item(i);

..... // childNode를 사용한 코드

}


-nodeName과 nodeValue는 각 노드마다 서로 다른 값을 갖게 된다.

노드 타입

nodeName 프로퍼티

nodeValue 프로퍼티

Document

#document 

null 

Element

태그 이름 

null 

Text

#text 

문자열 


예를 들어, 

<div>태그에 해당하는 노드의 경우 nodeName 프로퍼티의 값은 'DIV'가 되고,

nodeValue는 null이 된다.

'<h1>오늘의 하루</h1>'에서 '오늘의 하루' 부분에 해당하는 Text 노드의 경우 nodeName은 '#text'가 되고,

nodeValue는 '오늘의 하루'가 된다.


노드 타입이 Element인 경우 nodeName의 값은 태그의 이름과 동일.



nodeType 프로퍼티는 해당 노드가 어떤 타입인지를 타나낼 때 사용

상 수 명

값

의  미

 ELEMENT_NODE

1 

Element 노드를 의미

ATTRIBUTE_NODE

2

Attribute 노드를 의미

TEXT_NODE

3

Text 노드를 의미

CDATA_SECTION_NODE

4

CDATASection 노드를 의미

ENTITY_REFERENCE_NODE

5

EntityReference 노드를 의미

ENTITY_NODE

6

Entity 노드를 의미

PROCESSING_INSTRUCTION_NODE

7

ProcessingInstruction 노드를 의미

COMMENT_NODE

8

Comment 노드를 의미

DOCUMENT_NODE

9

Document 노드를 의미

DOCUMENT_TYPE_NODE

10

DocumentType 노드를 의미

DOCUMENT_FRAGMENT_NODE

11

DocumentFragment 노드를 의미

NOTATION_NODE

12

Notation 노드를 의미


예를 들어,

자식 노드가 Text 노드인 경우에만 별도 처리를 하고 싶다면 다음과 같은 코드를 사용


var childNodeList = node.childNodes;

for (var i = 0; i < childNodeList.length; i++) {

var child = childNodeList.item(i);

if (child.nodeType == 3) {

// child가 Text 노드인 경우 작업

}

}



-Document 인터페이스의 주요 프로퍼티 및 함수

Document 인터페이스는 문서 전체를 나타내는 인터페이스로서 document 객체가 Document 인터페이스에 해당된다.

프로퍼티 타입

프로퍼티 이름

설  명

Element

documentElement

문서의 루트 노드를 나타낸다.


예를 들어,


<html>

<head><title>제목</title>

<body><h1>Ajax 프로그래밍</h1></body>

</html>


이 경우 document.documentElement 는 위 문서의 루트 노드인 HTML 태그가 된다.


Document는 문서 전체를 나타낸다고 했는데, 특정 노드에 접근하기 위해서 document 부터 차례대로 접근한다면

코드가 매우 복잡해질 것이다.



보다 간단하게 찾아가자

함 수

설 명

NodeList getElementsByTagName(String tagname)

지정한 이름의 태그에 해당하는 모든 Element의

목록을 구한다 

Element getElementById(String elementId)

id 속성의 값이 elementId 인 태그를 구한다. 


예를 들어,

span 태그의 목록을 가려오고 싶다면


var spanList = document.getElementsByTagName("span");

for (var i = 0; i < spanList.length; i++) {

var span = spanList.item(i);

......

}


예를 들어,

id 속성 값이 "b"인 Element를 구하고 싶다면


var bSpan = document.getElementById("b");



-Element 인터페이스의 주요 프로퍼티 및 함수

Element 인터페이즈는 태그를 나타내는 인터페이스이다. 즉, HTML, BODY, P, DIV 등 태그를 표현할 때 사용되는

인터페이스가 Element이다

프로퍼티 타입

프로퍼티 이름

설  명

String

tagName

태그의 이름 


tagName 프로퍼티는 태그의 이름을 리턴한다. 즉, Element 노드는 Node의 nodeName과 tagName이 동일한 값을 갖게 된다.


Element는 새로운 속성을 추가하거나, 기존 속성의 값을 변경하거나 또는 속성을 제거 할 수 있는 기능을 함수로 제공

함 수

설 명

String getAttributs(String name)

name에 해당하는 속성의 값을 구한다.

setAttribute(String name, String value)

이름이 name인 속성의 값을 value로 지정한다. 

removeAttribute(String name)

이름이 name인 속성을 제거한다. 


예를 들어,


<book id="book1" isbn="8980781555" category="jsp">

.....

</book>


"book1" Element 를 구한 뒤 "isbn" 속성의 값을 bookIsbn 변수에 저장한다.

그리고 "category" 속성의 값을 "jsp, web"으로 변경한다.


var bookNode = document.getElementById("book1"); //id = book1

var bookIsbn = bookNode.getAttribute("isbn") //isbn = "8980781555"

bookNode.setAttribute("category", "jsp,web") //category 값을 변경



-Document 인터페이스의 Element 노드 생성 함수

함 수

설 명

Element createElement(String tagName)

지정한 태그 이름을 갖는 Element 노드를 생성한다. 

Text createTextNode(String text)

text를 값으로 갖는 Text 노드를 생성한다. 


예를 들어,

새로운 <p> 태그를 생성하고 싶다면


var pNode = document.createElement("p");

var textValue = document.createTextNode("테스트");

pNode.appendChild(textNode);



-Node 인터페이스의 DOM 트리 변경 관련 함수

Node 인터페이스는 현재 노드에 새로운 자식 노드를 추가하거나, 자식 노드를 삭제하는 것과 같이 

DOM 트리를 조작할 수 있는 함수 제공

함 수

설 명

Node insertBefore

(Node newChild, Node refChild)

현재 노드의 자식 노드인 refChild 노드의 previousSibling 자리에

newChild 노드를 삽입한다.

Node replaceChild

(Node newChild, Node oldChild)

현재 노드의 자식 노드인 oldChild 노드를 새로운 newChild 노드로

교체한다.

Node removeChild

(Node oldChild)

현재 노드의 자식 노드인 oldChild를 현재 노드에서 제거한다.

Node appendChild

(Node newChild)

newChild 노드를 현재 노드의 마지막 자식 노드로 추가한다. 


예를 들어,

1) Document.createElement()로 새로운 노드를 생성한 뒤, appendChild() 함수를 사용해 원하는 노드에 추가


var bNode = document.createElement("span"); //<span>태그 생성

bNode.setAttribute("id", "b"); //<span id="b">


var aNode = document.getElementById("a"); //id="a"를 가진 태그를 찾고

aNode.appendChild(bNode); //<span>태그를 자식노드로 삽입



2) <h1> 태그를 <body> 태그에서 삭제하고 싶다면


var aNode = document.getElementById("a");

var bodyNode = aNode.parentNode; //aNode의 부모노드를 구하고

bodyNode.removeChild(aNode); //구한 부모노드 아래있는 aNode를 삭제




예제

<script type="text/javascript">

var count = 0;


function appendItem() {

count++;

var newItem = document.createElement("div"); //새로운 div 노드 생성

newItem.setAttribute("id", "item_" + count); //id 속성 지정

var html = "새로 추가된 아이템[" + count + "]"

+ "<input type='text' value='삭제' onclick='removeItem(" + count + ")' />";

newItem.innerHtml = html; //div에 들어갈 HTML 코드


var itemListNode = document.getElementById("itemList");

itemListNode.appendChild(newItem); //생성한 노드를 itemList에 추가

}


function remove(idCount) {

var item = document.getElementById("item_" + idCount); //삭제할 div 영역 선택

if (item != null) {

item.parentNode.removeChild(item); //부모 노드에서 선택한 div를 제거

}

}

</script>


<input type="button" value="추가" onclick="appendItem()" />

<div id="itemList"></div>

이 게시물을...