태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

2011.11.21 14:56

- DOM(Document Object Model)은 문서 객체 모델이라는 의미로, HTML 문서와 XML 문서를 조작하기 위한 API(Application Programming Interface)다. 즉 DOM은 일반 프로그래밍 언어나 스크립트를 가지고, HTML이나 XML문서의 내용, 즉 DOM은 일반 프로그래밍 언어나 스크립트를 가지고, HTML이나 XML문서의 내용, 구조, 스타일 정보를 검색하고 수정할 수 있게 하는 프로랫폼 또는 인터페이스라고 할 수 있다. DOM을 사용하는 목적은 어떠한 환경이나 애플리케이션에서도 사용할 수 있는 표준 프로그래밍 인터페이스르를 제공하는데 있다.

 

자바스크립트를 이용해 XML 문서를 읽고, 최상위 루트노드의 정보를 출력하는 HTML 예제다.

<HTML>

<HEAD><TITLE> DOM example </TITLE>

<SCRIPT language="javascript">

var objDoc;

//MSXML 파서를 사용하여 Document 객체를 만든다.

objDoc=new ActiveXObjext("MSXML.DOMDocument");

 

//XML 문서를 읽어 들인다..

objDoc.async=false;

objDoc.load("students.xml");

 

//최상위 노드의 정보를 추출하고 메시지 창을 이용해 출력한다.

var objRootNode;

objRootNode = objDoc.documentElement; //objRootNode에 XML의 document엘리먼트를 추가한다.

alert(" nodeName : " + objRootNode.nodeName +   //노드 이름은 students

"\n nodeValue : " + objRootNode.nodeValue +   //students노드가 가지고 있는 값은 null이다.

"\n nodeType : " + objRootNode.nodeType );   //그리고 studnets nodeType은 1이다.

</SCRIPT>

</HEAD>

 

<BODY>

DOM을 활용한 XML 문서 조작

</BODY>

</HTML>

 

DOM API 활용

- DOM의 모든 요소는 임의의 인터페이스로 구현한다. 이러한 인터페이스는 다음과 같은 속성을 갖는다.

 

속성               내용
타입(Type)     인터페이스의 형태를 나타내며 , 정수나 상수로 표현한다.

이름(Name)    Element 인터페이스라면 Element의 태그명이 되지만, Comment면 #Comment가 이름이 되고
                      Document 인터페이스면 #Document라는 일반화한 이름이 온다.

값(Value)       해당 인터페이스가 가지는 값을 의미 대부분의 인터페이스가 값을 가지지 않는 경우를 포함하므로 값이
                     없을때는 null 값을 갖는다.

 

Node 인터페이스
- Node 인터페이스는 DOM의 기본 자료형으로 DOM트리에서 노드를 표현할 때 사용한다.

즉 요소, 주석 , 속성 등이 모든 Node 인터페이스로부터 상속 받는다. 또한 Node 인터페이스로부터 상속받은 객체는 자식 노드를 처리하기 위한 메소드를 가진다. 그러나 모든 객체가 자식 노드를 갖고 있는 것이 아니므로 주의해야 한다. Node 인터페이스는 노드 이름과 값은 위한 nodeName, nodeValue 멤버 필드를 갖고 있다.

 

노드는 DOM의 기본 인터페이스이다. 거의 모든 인터페이스가 노드 인터페이스에서 확장한 것이다. 우선 노드 정보를 얻을 수 있게인터페이스에서 몇가지 프로퍼티를 제공한다. 다음은 노드 속성과 속성타입을 설명한 것이다.

속성 이름               속성 타입                           설명

nodeName             String                   노드 이름

nodeValue              Text                    노드 값

nodeType               Number               노드 타입. 0부터 시작하는 정수로 표현.

parentNode             Node                   노드의 부모 노드

childNode               NodeList              노드의 자식 노드

firstNode                Node                   첫번째 자식 노드

lastNode                Node                    마지막 자식 노드
prviousSibling         Node                    노드의 형제 노드 중 바로 앞 노드
nextSibling             Node                    노드의 형제 노드 중 바로 다음 노드

attributes                NameNodeMap      노드 속성

ownerDocument            Node                         노드를 포함하는 문서

namespaceURI             String                          노드의 네임스페이스 URI

prefix                           String                         노드의 네임스페이스 접두어

 

 다음은 XML 파서로 DOM을 구현한 예제이다. 자바스크립트로 프로그램이 하고, 노드 속성을 사용해서 노드 정보를 출력한다.

<html>

<head>

<title> DOM 속성 사용</title>

<script language="javascript">

var objDOM;

objDOM = new ActiveXObject("MSXML.DOMDocument");

objDOM.load("dom.xml");

//nodename을 알기 위해 만든 함수

function nodecall() {

var objNode;

objNode = objDOM.documentElement.firstChild;

alert(bojNode.nodeName);

}

//nodeValue을 알기 위해 만든 함수

function nodecall2(){

var objNode;

objNode = objDOM.documentElement.firstChild;

alert(objNode.nodeValue);

}

</script>

</head>

<body>

<p>DOM의 노드 인터페이스</p>

<input style="width:320px" type=button value=문서&nbsp;요소의&nbsp;첫반쨰&nbsp;자식의&nbsp;첫번째&nbsp;자식의&nbsp;노드&nbsp;값  onclick="nodecall();">
 <br>
 <input style="width:320px" type=button value=문서&nbsp;요소의&nbsp;첫반쨰&nbsp;자식의&nbsp;첫번째&nbsp;자식의&nbsp;노드&nbsp;값  onclick="nodecall2();">

</body>

</html>

 

노드 인터페이스는 기본적으로 여러 메소드를 지원한다.. 첫번째로 노드 정보를 얻기 위한 메소드는 다음과 같다.

메소드                                          내용

String getNodeName()                   노드 이름을 반환

String getNodeValue()                   노드 값을 반환

void setNodeValue()                      노드 값을 설정

short getNodeType()                     노드 타입을 반환

NamedNodeMap getAttributes()      속성을 반환

Document getOwnerDocument()     현재 노드가 속한 문서를 반환  

 

두 번째로 XML 문서의 내용을 읽고, 변경하고, 삭제하기 위한 메소드는 다음과 같다.

메소드                                                      내용

Node insertBefore(Node newChild,     refChild 노드 앞에 newChild 노드를 삽입하는 메소드
Node refChild)                                       refChild 노드가 null이면 newChild 노드는 맨자미가 자식 노드로 삽입한다.

Node replaceChild(Node newChild,    노드를 대체하는 메소드 (replace)
Node oldChild)                                      oldChild 노드를 newChild 노드로 대체한다.

Node removeChild(Node oldChild)      자식 노드를 제거하는 메소드

        제거하려는 자식 노드를 참조해서 객체를 반환한다. 하지만 완전히 제거하
        는것이아니라는 사실을 유념한다. 완전히 제거하고 그 객체를 변수에 저장
        해 서 보관할 수도 있다.

Node appendChild(Node newChild)   노드 추가 메소드
                                                             추가하려는 노드 위치에 다른 형제 노드가 있으면 마지막에 노드를 추가한다.

Node cloneNode(boolean deep)         노드의 복사본을 만드는 메소드

  cloneNode()는 하나의 boolean 파라미터를 갖는다. 파라미터가 true명 deep clone이고 false면 shallow clone
  이다. deep clone 이면 노드 밑의 자식을 모두 복사하고, shallow clone이면 해당 노드만 복사한다. shallow 
  clone일 때 자식은 복사가 되지 않지만 속성 등은 함께 복사가 된다.

 

세번째로 부모 노드, 자식 노드, 형제 노드에 관련한 정보를 얻기 위한 메소드는 다음과 같다.

메소드                                             내용

Node getParentNode()                 부모 노드를 반환

NodeList getChildNodes()           자식 노드를 NodeList 타입으로 변환

Node getFirstChild()                    첫번째 자식 노드를 반환

Node getLastChild()                    마지막 자식 노드를 반환

Node getPrevoiusSibling()          현재 노드의 앞에 형제 노드를 반환

Node NextSibling()                      현재 노드의 뒤에 형제 노드를 반환

boolean hasChildNodes()           단순히 노드가 자식을 가지고 있는지 없는지 확인을 하기 위해서 쓰는 메소드로,
                                                     자식이 있는지 없는지를 부울 값으로 반환, 자식이 비록 텍스트 노드라도
                                                     hasChildNodes()는 true를 반환한다.

 

Document 인터페이스

- Document 인터페이스는 문서 전체에 접근을 제어하는 인터페이스다. 모든 노드는 문서에 포함이 되어있다. 이 인터페이스로 할수 있는 작업은 노드 트리를 검색하거나 노드 목록의 반환을 요구하는 작업을 할 수 있다. 또한 새로운 노드나 속성을 만들 수도 있다.

 

문서 관련 정보는 얻는 메소드

메소드                                                            내용

DocumentType getDoctype()                      DocumentType 객체를 반환

               DocumentType 인터페이스는 문서에 정의한 개체에 접근하기 위한 메소드제공

DOMImplementation getImplementation()  DOMImplementation 객체를 반환

               DOMImplementation은 파서의 특성을 파악하기 위한 메소드가 있다.

 

문서 트리를 순회하기 위한 메소드

메소드                                                                                          내용

Element getDocumentElement()                                               문서 요소를 반환

Element getElementByID(String elementID)                             elementID 안에 지정한 ID를 가진 요소를 반환

                                       지정한 ID를 가진 요소가 없으면 NULL 반환

NodeList getElementsByTagNameNS(String namespace       URI로 지정한 네임스페이스와 지정한 로컬 이름을 가진 문서 안에
namespaceURI, String localName)                                           있는 모든 요소의 NodeList를 반환

NodeList getElementByTagName                                             문서 안에 tagName의 이름을 가진 모든 요소의 NodeList 객체를 반환
(Stirng tagName)


문서를 작성하기 위한 메소드

메소드                                                      내용

Element createElement(String tagName)      지정한 이르므이 요소를 만들 때 사용하는 메소드로, tagName에 지정한 이
                                                               름의 요소를 생성

Element createElementNs                          주어진 이름과 네임스페이스를 이용해서 요소를 생성

DocumentFragment createDocument-          비어 있는 DocumentFragment 객체를 생성
Fragment()            

Text createTextNode(String data)                data에 텍스트가 있는 text 노드를 생성

Comment createComment(String data)        data에 텍스트가 있는 Comment 노드를 생성

CDATASection createCDATASection            data에 있는 텍스트가 CDATASection 노드를 생성
(String data)

ProcessiongInstruction createProcessin-     지정한 target과 data를 가지니 ProcessingInstruction 노드를 생성,
gInstruction(String target,String data)           ProcessingInstruction이 가리키는 애플리케이션을 지정하는 문자열이 오고
                                                               data는 taget을 제외한 나머지 부분의 문자열이 온다.

Attr createAttribute(String name)                  지정한 name속성을 생성. 만들어진 노드는 노드 인터페이스의 nodeName
                                                               속성에 접근을 할 수 있다.

Attr createAttributeNS(String namespa-        주어진 이름과 네임스페이스를 이용해서 속성을 생성
ceURI, String qulifiedName)

EntityReference createEntity Reference        지정한 name의 개체 참조를 생성
(String name)

Node importNode(Node importNode,           필요한 곳으로 노드를 복사할 수 있게 한다.
boolean deep)                                          다른 문서에서 이 문서로 importNode 노드를 가져온다.
                                                               원래의 노드는 이전의 문서에서 제거하지 않고 복사한다.
                                                               deep 속성은 deep 또는 shallow clone을 지정한다.

 

 

DOMImplementation 인터페이스

- DOMImplementation 인터페이스는 DOM을 구현할 때 어떤 문서에서나 적용할 수 있는 메소드를 제공한다. Document 인터페이스와 implementation 속성을 이용해서 DOMImplementation 객체를 만들 수도 있다. 해당 메소드를 살펴보고 예제를 실행해보다.

메소드                                                                     내용

boolean hasFeature(String feature, String version)        현재 DOM의 어떤 특성을 지원하는지 여부를 알아본다.

DOM 레벨 1인 경우에 "1.0"을 사용

DocumentType createCocumentType(String qual         지정한 속성의 문서 타입을 생성
ifiedName, String publicId, String systemId)

Document createDocument(String namespaceURI,       qulifiedName으로 지정한 문서 요소를 가진 Document객체생성
String qulifiedName, DocumentType doctype)             doctype속성은 반드시 DocumentType 형식의 객체를 참조

 

DocumentFragment 인터페이스

- DocumentFragment 인터페이스는 문서 조각을 쉽게 조작할 수 있게 잠시 보관하는 역할을 하는 인터페이스다. 임시 보관소 개념으로 이해하면 쉬울 것이다. 따라서 보관하는 문서가 반드시 정형식 문서일 필요는 없다.이러한 임시보관소는 다른 xml구조와 같이 합쳐져서 사용될수 있다.

 

 DocumentFragment는 Node 인터페이스가 제공하는 속성과 메소드를 동일하게 제공한다. DocumentFragment는 객체로 자식을 포함할 수도 있지만 포함하지 않을 수도 있다. 이 때 자식의 의미는 노드나 텍스트 노드 등이 될 수 있다. 다만 주의할 점은 DocumenFragment 객체 역시 Node 인터페이스에서 제공하는 메소드를 이용하면 자식을 다른 곳으로 보낼 수 있지만, 자기 자신에 해당하는 객체는 어디에서도 복사할 수 없다는 것이다. 간단한 사용예를 보면.


docFrag = objDOM.createDocumentFragment();

objNode = objDOM.createElement("address");

objText  = objDOM.createTextNode("서울 잠원동");

//임시 저장소에 요소를 생성하고 텍스트 데이터를 생성한다.

docFrag.appendChild(objNode);

docFrag.firstChild.appendChild(objText);

//읽어들인 student.xml 문서에 임시 저장소의 요소와 텍스트 데이터를 추가한다.

objDOM.documentElement.appendChild(docFrag);

 

 NodeList 인터페이스

 - NodeList는 DOM을 구현할 떄 하나 이상의 노드를 반환하도록 하는 메소드나 속성의 요청이 있을 때 반환하는 객체로, 정렬한 집합체 모습을 하고 있다. 여러 개의 노드를 호출하려고 할 때 유용하게 쓸 수 있다.

 

 NodeListd에 포함한 노드들은 인덱스 값을 이용해서 접근할 수 있고, 인덱스는 0부터 시작한다. NodeList에서 얻는 노드 순서는 XML 문서에서 부모 노드에 노드를 추가한 순서다. 예를 들면,getElementByName()과 같은 메소드를 이용해서 노드를 호출하면 NodeList객체를 반환한다. NodeList 노드는 반드시 부모와 자식 관계나 형제 관계일 필요는 없지만, 적어도 문서의 한 부분이어야 한다. NodeList 인터페이스는 int getLength()와 NodeItem(int index) 메소드를 갖고있다.

 

NodeList 인터페이스에서 제공하는 메소드

메소드                        내용

int getLength()            NodeList 안에 포함한 노드 수를 반환

Node item(int index)   NodeList 목록 중에서 지시한 곳의 Node를 반환

    index는 0부터 시작하고, 범위는 0부터 length-1 의 값이 된다.

    만인 index와 length가 같아지면 null을 반환한다.

 

Element 인터페이스

 - Element 인터페이스는 요소로 바로 접근해서 작업할 수 있게 하는 인터페이스다. 노드를 통해서 요소로 접근하는 것보다는 요소로 바로 접근하는 것이 작업하기에 편할 것이다. 그런데, 요소로 접근해서 무엇을 할 수 있을까? 요소 인터페이스는 주로 속성과 관련한 메소드를 갖고 있다. 물론 이외에도 요소를 검색할 수 있는 메소드가 있다. Element 인터페이스 속성은 tagName 속성뿐이다. tagName 속성은 요소 이름을 반환하며, 읽기 전용 속성으로 사용한다.

 

요소 객체의 속성에 접근해서 처리하는 메소드

메소드                                                   내용

String getAttribute(String name)                지정한 name 속성 값을 반환

속성에 지정한 값이 없거나, 기본값을 가지고 있지 않으면 빈 문자열을 반환한다.

Attr setAttribute(String name, String value) name 이라는 지정한 속성 값을 value 값으로 만듬

해당 속성이 존재하지 않으면 name을 가진 속성을 만든다.

void removeAttribute(String name)            지정한 속성을 제기

기본값을 가지고 있는 속성은 이 기본값을 가지고 있는 동일한 속성으로 곧바로 대체한다.

Attr getAttributeNode(String name)            지정한 이름의 속성을 담고 있는 Attr 노드를 반환

해당 노드가 없으면 null을 반환한다.

Attr setAttributeNode(Attr newAtrr)            새로운 속성 노드를 추가. 현재 요소에 Attr 노드를 추가

같은 이름이 존재하면 대체한다. Attr을 대체하면 대체한 값을 반환하고, 그렇지 않으면 null을 반환한다.

Attr removeAttributeNode(Attr oldAttr)        지정한 Attr 노드를 제거하고 반환

기본값을 가지고 있는 속성은 이 기본값을 가지고 있는 동일한 속성으로 곧바로 대체한다.

 

요소 태그에 접근하기 위한 메소드

메소드                                                    내용

String getTagName()                               태그 이름을 반환

NodeList getElementByTagName              name으로 주어진 노드를 가진 모든 자식의 NodeList를 반환
(String name)

NodeList getElementByTagName              주어진 이름과 네임스페이스를 갖는 모든 요소를 반환
(String namespaceURI,String localName)

boolean hasAttribute(String name)             주어진 이름의 속성이 있는 경우, true를 반환

boolean hasAttributeNS(String namespa-   주어진 이름과 네임스페이스를 갖는 속성이 있는 경우, true를 반환
ceURI, String localName)

 

NamedNodeMap 인터페이스

- NamedNodeMap 인터페이스는 NodeList와 유사한데, 정렬하지 않는 집합체라는 점만 다르다. 사용법도 NodeList 인터페이스와 유사하다. NodeList가 가지고 있는 item() 메소드와 getLength() 메소드도 갖고 있다. NamedNodeMap은 이름을 이용해서 노드에 접근하고자 할 때 사용할 수 있다. 주로 요소에 포함한 속성을 추출하기 위해 사용한다. 노드는 이름과 인덱스 값을 이용해서 추출할 수 있고, 인덱스는 0부터 시작한다.

 

NameNodeMap 메소드

메소드                                                      내용

Node getNamedItem(String name)           노드 이름이 name으로 지정한 것과 같으면 Node를 반환하고, 해당노
                                                                드가 없으면 null을 반환

Node setNamedItem(Node arg)               새로운 노드를 추가

   같은 이름의 노드가 존재하면, 기존 노드에 새 노드를 대체 한다.
   Node를 대체 하려면 대체한 Node를 반환하고, 그렇지 않으면 null을 
   반환한다.

Node removeNamedItem(String name)    name으로 지정한 Node를 제거하고 해당 Node를 반환

Node item(int index)                                index로 지정한 위치의 Node를 반환

   index가 length보다 크거나 같다면 null을 반환한다.

 

int getLength()                                          NamedNodeMap에 포함한 노드 수를 반환

 

 Attr 인터페이스

- Attr 인터페이스는 요소의 속성에 대한 인터페이스를 제공하낟. xml 문서의 트리 구조를 봤을 때 속성은 트리 구조를 형성하지 않는다. 속성이 요소의 자식으로써 존재하는 것이 아니고 속성으로 존재하는 것이다. Attr 인터페이스는 다음과 같은 메소드를 가지고 있다.

 

Attr 인터페이스의 메소드

메소드                                    내용

String getName()                     속성 이름을 반환

boolean getSpecified()             원 문서에서 속성을 명시적인 값으로 준 경우, true를 반환하고, 그렇지 않은 경우에는 false를 반환

String getValue()                     속성 값을 반환

void setValue()                       속성 값을 설정

Element getOwnerElement()     해당 속성이 소속된 요소르 반환

CharaterData와 Text 인터페이스-

- CharaterData 인터페이스와 Text 인터페이스 XML 문서에서 사용하는 텍스트를 다루기 위해서 만들어진 인터페이스다. Text는 CharaterData의 확장이지만, PCDATA, 속성 값 주석 등 상당히 많은 곳에서 쓰이고 있다. CharaterData 인터페이스도 Attr 인터페이스처럼 자식 노드를 포함할 수 없다는 점을 주의하자. data 속성은 CharaterData 노드 안의 텍스트로, 노드의 문자 데이터를 표현하거나 설정할 때 사용한다. length 속성은 노드 안의 데이터 글자 수로, 노드가 비어 있으면 0을 반환한다.


CharaterData 인터페이스의 메소드

메소드                                                  내용

oid appendData(String arg)                     기존 문자 데이터의 끝에 arg 스트링을 추가

void deleteData(int offset, int count)         offset에서 시작하는 스트링의 일부를 삭제한다. count로 지정한 글자(유니코드 문자) 숫자만큼 반환하거나, 그 숫
                                                           자보다 글자수가 적다면 끝까지 삭제한다.

String getData()                                     CharcterData 인터페이스를 구현한 노드의 문자 데이터를 반환

int getLength()                                       문자열 길이를 변환

void insertData(int offset, String arg)         offset에서 지정한 위치에 arg를 삽입

void replaceData(int offset, int count,        문자 데이터의 일부나 전체를 다른 스트링으로 대체
String arg)                                             offset에서 시작하는 스트링 일부를 대체한다. count로 지정한 숫자만큼 반환하거나, 그 숫자보다 글자 수가 작다면
                                                            끝까지 대체한다. arg 인자는 새롭게 삽입할 스트링이다.

void setData(String data)                         데이터를 설정

String substringData(int offset,int count)    문자데이터 중에서 offset에서 시작해서 count로 지정한 숫자만큼 반환하거나,그 숫자보다 글자 수가 작다면 끝까
                                                            지 반환
                                                            주의 : 색인은 0부터 시작

Test 인터페이스의 메소드

메소드                                                   내용
Text splitText(int offset)                           offset을 기준으로 텍스트를 두 개로 분리

 

 

출처 - http://okm12.springnote.com/pages/3230716.xhtml 

신고

'Script > Dom' 카테고리의 다른 글

dom 정리  (0) 2011.11.21
이미지뷰 lightbox  (0) 2010.08.25
드래그 가능한 레이어 팝업  (0) 2010.08.25
바르지 않는 표현 - 추천 하는 표현  (0) 2008.04.25
Dom 사용방법  (0) 2008.04.25
브라우저별 객체 판별 스크립트  (0) 2008.04.25
Posted by 고시랑
이전버튼 1 2 3 4 5 6 이전버튼

티스토리 툴바