XML DOM

문서 객체 모델(DOM)이란?

DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 API로 W3C 표준 권고안입니다.

 

DOM은 문서 내의 모든 요소를 정의하고, 해당 요소에 접근하는 방법까지 정의합니다.

 

 

 

XML 예제

<?xml version="1.0" encoding="UTF-8"?>

 

<programming_languages>

 

<language>

 

<name>HTML</name>

 

<category>web</category>

 

<developer>W3C</developer>

 

<version status="working draft">5.1</version>

 

<priority rating="1">high</priority>

 

</language>

 

</programming_languages>

 

W3C DOM 표준은 다음과 같이 세 가지 모델로 구분됩니다.

 

 

 

1. Core DOM : 모든 문서 타입을 위한 DOM 모델

 

2. HTML DOM : HTML 문서를 위한 DOM 모델

 

3. XML DOM : XML 문서를 위한 DOM 모델

 

HTML DOM

HTML DOM은 HTML 문서에 접근하여 조작할 수 있는 표준화된 방법을 정의합니다.

 

모든 HTML 요소는 HTML DOM을 통해 접근할 수 있습니다.

 

XML DOM

XML DOM은 XML 문서에 접근하여, 해당 문서를 조작할 수 있는 표준화된 방법을 정의합니다.

 

모든 XML 요소는 XML DOM을 통해 접근할 수 있습니다.

 

 

 

XML DOM은 XML 문서 내의 모든 요소의 객체, 속성 그리고 메소드를 정의합니다.

 

이러한 XML DOM은 플랫폼이나 프로그래밍 언어에 상관없이 언제나 사용할 수 있습니다.

 

XMLHttpRequest 객체

현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있습니다.

 

XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용됩니다.

 

 

 

이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다.

 

즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 됩니다.

 

XMLHttpRequest 객체의 생성

자바스크립트를 이용하여 XMLHttpRequest 객체를 생성하는 방법은 다음과 같습니다.

 

예제

var xmlHttp = new XMLHttpRequest();

 

readyState 프로퍼티

readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타냅니다.

 

 

 

이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화합니다.

 

 

 

1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.

 

2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.

 

3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.

 

4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.

 

5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

 

status 프로퍼티

status 프로퍼티는 서버의 문서 상태를 나타냅니다.

 

 

 

- 200 : 서버에 문서가 존재함.

 

- 404 : 서버에 문서가 존재하지 않음.

 

XMLHttpRequest 객체의 전송

자바스크립트를 이용하여 XMLHttpRequest 객체를 전송하는 방법은 다음과 같습니다.

 

예제

var xmlHttp = new XMLHttpRequest(); // XMLHttpRequest 객체를 생성함.

 

xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함.

 

// 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때

 

if(this.status == 200 && this.readyState == this.DONE) {

 

// 요청한 데이터를 문자열로 반환함.

 

document.getElementById("text").innerHTML = xmlHttp.responseText;

 

}

 

};

 

xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);

 

xmlHttp.send();

 

responseText 프로퍼티

responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 저장하고 있습니다.

 

예제

document.getElementById("text").innerHTML = xmlHttp.responseText;

 

responseXML 프로퍼티

responseXML 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 저장하고 있습니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

nameList = xmlObj.getElementsByTagName("name"); // XML DOM 객체에서 요소이름이 "name"인 요소들을 선택함.

 

result = "";

 

for (idx = 0; idx < nameList.length; idx++) {

 

// id가 "name"인 요소들의 텍스트 노드를 찾아 그 값을 반환함.

 

result += nameList[idx].childNodes[0].nodeValue + "<br>";

 

}

 

document.getElementById("text").innerHTML = result;

 

비동기식(asynchronous) 요청

서버에 비동기식 요청을 보내기 위해서는 open() 메소드의 세 번째 인수로 true를 전달하면 됩니다.

 

이렇게 비동기식으로 요청을 보내면 자바스크립트는 서버로부터 응답을 기다리면서 동시에 다른 일을 할 수 있게 됩니다.

 

예제

xmlHttp.open("GET", "/media/programming_languages.xml", true);

 

XML 파서(parser)

현재 대부분의 주요 웹 브라우저는 XML 문서에 접근하고 조작하기 위한 XML 파서를 별도로 내장하고 있습니다.

 

 

 

XML DOM은 XML 문서에 접근하고 조작할 수 있는 다양한 메소드를 포함하고 있습니다.

 

하지만 이러한 메소드를 이용하려면 우선 XML 문서를 XML DOM 객체로 변환해야만 합니다.

 

XML 파서(parser)는 XML 문서의 평문(plain text) 데이터를 읽어 들여, 그것을 XML DOM 객체로 반환해 줍니다.

 

문자열 파싱(parsing)

다음 예제는 XML 문서의 문자열을 추출하여 XML DOM 객체로 파싱하고, 해당 객체에서 정보를 추출하는 예제입니다.

 

예제

text = "<language><name>HTML</name>" +

 

"<category>web</category>" +

 

"<priority>high</priority>" +

 

"<standard version='5.1'>W3C</standard></language>";

 

xmlParser = new DOMParser(); // DOMParser 객체를 생성함.

 

// parseFromString() 메소드를 이용해 문자열을 파싱함.

 

xmlDoc = xmlParser.parseFromString(text, "text/xml");

 

document.getElementById("text").innerHTML = "첫 번째 name 요소의 텍스트 값은 " +

 

xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue + "입니다.";

 

노드(node)

W3C XML DOM 표준에 따르면 XML 문서 내의 모든 것은 노드(node)라고 불리는 계층적 단위에 정보를 담고 있습니다.

 

XML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 합니다.

 

노드의 종류

W3C XML DOM 표준에 따르면 XML 문서 내에 존재하는 모든 것은 노드입니다.

 

노드 트리(node tree)

XML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장됩니다.

 

이러한 노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타냅니다.

 

 

 

예제

<?xml version="1.0" encoding="UTF-8"?>

 

<programming_languages>

 

<language>

 

<name>CSS</name>

 

<category>web</category>

 

<developer>W3C</developer>

 

<version status="stable">3.0</version>

 

<priority rating="3">high</priority>

 

</language>

 

</programming_languages>

 

노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려갑니다.

 

XML DOM을 이용하면 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.

 

노드 간의 관계

노드 트리의 모든 노드들은 서로 계층적 관계를 맺고 있습니다.

노드 트리의 최상위에는 단 하나의 루트 노드(root node)만이 존재합니다.

 

 

 

루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)를 가집니다.

 

모든 요소 노드는 자식 노드(child node)를 가질 수 있습니다.

 

 

 

형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킵니다.

 

조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킵니다.

 

자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킵니다.

 

노드로의 접근

XML DOM을 이용하면 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.

 

이때 노드에 접근하는 방법에는 다음과 같은 방법들이 있습니다.

 

 

 

1. getElementsByTagName() 메소드를 이용하는 방법

 

2. 노드 트리를 연속적으로 탐색하여 접근하는 방법

 

3. 노드 간의 관계를 이용하여 접근하는 방법

 

getElementsByTagName() 메소드를 이용하는 방법

getElementsByTagName() 메소드는 특정 태그 이름을 가지는 모든 요소를 노드 리스트의 형태로 반환합니다.

 

따라서 이 메소드가 반환하는 노드 리스트를 이용하면 원하는 노드에 접근할 수 있습니다.

 

 

 

getElementsByTagName() 메소드를 사용하는 문법은 다음과 같습니다.

 

문법

노드이름.getElementsByTagName("태그이름")

 

노드 트리를 연속적으로 탐색하여 접근하는 방법

노드 트리 전체를 연속적으로 탐색하여 원하는 노드에 접근할 수도 있습니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

nodeList = xmlObj.documentElement.childNodes; // XML 문서 노드의 자식 노드를 반환함.

 

result = "XML 문서 노드의 자식 요소 노드<br>";

 

for(idx = 0; idx < nodeList.length; idx++) {

 

if(nodeList[idx].nodeType == 1) { // 요소 노드만을 출력함.

 

result += nodeList[idx].nodeName + "<br>";

 

}

 

}

 

document.getElementById("text").innerHTML = result;

nodeType 프로퍼티는 해당 노드의 타입을 저장하는 프로퍼티로, 수정할 수 없는 읽기 전용 프로퍼티입니다.

 

노드 간의 관계를 이용하여 접근하는 방법

XML DOM에서 노드 간의 관계는 다음과 같은 속성들로 정의됩니다.

 

 

 

1. parentNode : 부모 노드

 

2. childNodes : 자식 노드 리스트

 

3. firstChild : 첫 번째 자식 노드

 

4. lastChild : 마지막 자식 노드

 

5. nextSibling : 다음 형제 노드

 

6. previousSibling : 이전 형제 노드

 

 

 

위와 같은 속성들을 이용하여 원하는 노드에 손쉽게 접근할 수 있습니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.

 

node = firstLang.firstChild; // 첫 번째 <language>요소의 첫 번째 자식 노드를 반환함.

 

result = "language 요소의 모든 자식 요소 노드<br>";

 

for(idx = 0; idx < firstLang.childNodes.length; idx++) {

 

if(node.nodeType == 1) { // 요소 노드만을 출력함.

 

result += node.nodeName + "<br>";

 

}

 

node = node.nextSibling; // 현재 노드의 바로 다음 형제 노드를 반환함.

 

}

 

document.getElementById("text").innerHTML = result;

 

빈 텍스트 노드의 처리

현재 대부분의 주요 웹 브라우저는 모두 W3C DOM 모델을 지원하지만, 그 처리 방식에 있어 약간씩의 차이가 있습니다.

 

그중에서도 가장 큰 차이점은 띄어쓰기와 줄 바꿈을 처리하는 방식입니다.

 

 

 

파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드(text node)로 취급합니다.

 

하지만 익스플로러는 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급하지 않습니다.

 

 

 

따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 하면 브라우저 간에 차이가 발생하게 됩니다.

 

이 차이를 없애는 가장 손쉬운 방법은 nodeType 프로퍼티를 사용하여 선택된 요소의 타입을 검사하는 것입니다.

 

 

 

다음 예제는 특정 노드의 맨 마지막 자식 요소 노드에 접근하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

documentNode = xmlObj.documentElement; // XML 문서 노드를 반환함.

 

lastNode = documentNode.lastChild; // XML 문서 노드의 마지막 자식 노드를 반환함.

 

if(lastNode.nodeType != 1) { // 마지막 자식 노드가 요소 노드가 아니면,

 

lastNode = lastNode.previousSibling; // 현재 마지막 노드의 바로 앞 노드를 반환함.

 

}

 

document.getElementById("text").innerHTML = "XML 문서 노드의 맨 마지막 자식 요소 노드는 " +

 

lastNode.childNodes[1].firstChild.nodeValue + "입니다.";

위의 예제에서 마지막 자식 노드를 찾은 후에, 찾은 노드의 타입이 요소 노드가 아니면 그 앞의 노드를 다시 검사합니다.

 

이 방식을 사용하면 모든 브라우저에서 마지막 자식 노드로 같은 요소 노드를 선택할 수 있게 됩니다.

 

노드 리스트(node list)

노드 리스트는 getElementsByTagName() 메소드나 childNodes 속성의 속성값으로 반환되는 객체입니다.

 

이 객체는 XML 문서와 같은 순서대로 문서 내의 모든 노드를 리스트 형태로 저장하고 있습니다.

 

 

 

노드 리스트의 각 노드는 배열처럼 0부터 시작하는 인덱스를 이용하여 접근할 수 있습니다.

 

다음 예제는 XML 문서 노드의 자식 노드를 노드 리스트 객체로 반환하는 예제입니다.

 

예제

nodeList = xmlObj.documentElement.childNodes;

 

노드 리스트의 길이

노드 리스트 객체는 노드 리스트에 노드를 추가하거나 삭제하면 자신의 상태 정보를 스스로 갱신합니다.

 

따라서 이 객체의 length 속성값은 언제나 노드 리스트가 저장하고 있는 노드들의 총 개수를 나타냅니다.

 

 

 

다음 예제는 XML 문서 노드의 자식 노드의 개수를 반환하는 예제입니다.

 

예제

nodeNum = xmlObj.documentElement.childNodes.length;

 

속성 리스트

요소 노드의 attributes 속성은 해당 요소 노드가 가지고 있는 모든 속성 노드를 리스트 형태로 반환합니다.

 

이것을 속성 리스트(named node map) 객체라고 합니다.

 

 

 

속성 리스트 객체도 노드 리스트 객체와 마찬가지로 자신의 상태 정보를 스스로 갱신합니다.

 

하지만 속성 리스트 객체는 노드 리스트 객체와는 달리 인덱스로는 접근할 수 없는 순서 없는 리스트(unordered list)의 형태를 가집니다.

 

따라서 자바스크립트에서는 이름만으로도 아이템을 선택할 수 있는 getNamedItem() 메소드를 별도로 제공합니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

// 첫 번째 <version>요소의 모든 속성을 리스트 형태로 반환함.

 

attrList = xmlObj.getElementsByTagName("version")[0].attributes;

 

document.getElementById("text").innerHTML = // 속성 리스트에서 status 속성의 값을 반환함.

 

"첫 번째 version 요소의 status 속성값은 " + attrList.getNamedItem("status").nodeValue + "입니다.";

 

nodeType 프로퍼티는 해당 노드의 타입을 저장하는 프로퍼티로, 수정할 수 없는 읽기 전용 프로퍼티입니다.

 

 

노드에 대한 정보

노드에 대한 정보에는 다음과 같은 프로퍼티를 사용하여 접근할 수 있습니다.

 

 

 

1. nodeType

 

2. nodeName

 

3. nodeValue

 

 

 

이 프로퍼티들은 특별히 다른 인터페이스를 사용하지 않고도 해당 노드 정보에 직접 접근할 수 있는 방법을 제공해 줍니다.

 

nodeType 프로퍼티

nodeType 프로퍼티는 해당 노드의 타입을 저장하는 프로퍼티로, 수정할 수 없는 읽기 전용 프로퍼티입니다.

 

다음 예제는 XML 문서 노드의 타입을 출력하는 예제입니다.

 

예제

var xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

document.getElementById("text").innerHTML = // XML 문서 노드의 타입을 반환함.

 

"XML 문서 노드의 타입은 " + xmlObj.nodeType + "입니다.";

 

nodeName 프로퍼티

nodeName 프로퍼티는 해당 노드의 이름을 저장하는 프로퍼티로, 수정할 수 없는 읽기 전용 프로퍼티입니다.

 

다음 예제는 XML 문서 노드의 자식 노드 중 첫 번째 요소 노드의 이름을 출력하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

// XML 문서 노드의 첫 번째 요소 노드를 반환함.

 

firstElementNode = xmlObj.documentElement.childNodes[1];

 

// 해당 노드의 첫 번째 요소 노드의 이름을 반환함.

 

document.getElementById("text").innerHTML =

 

"첫 번째 요소 노드의 이름은 " + firstElementNode.childNodes[1].nodeName + "입니다.";

 

nodeValue 프로퍼티

nodeValue 프로퍼티는 해당 노드의 값을 저장합니다.

 

다음 예제는 XML 문서 노드의 자식 노드 중 첫 번째 요소 노드의 텍스트 노드의 값을 출력하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

// XML 문서 노드의 첫 번째 요소 노드를 반환함.

 

firstElementNode = xmlObj.documentElement.childNodes[1];

 

// 해당 노드의 첫 번째 요소 노드의 텍스트 노드의 값을 반환함.

 

document.getElementById("text").innerHTML = "첫 번째 요소 노드의 텍스트 노드값은 " +

 

firstElementNode.childNodes[1].firstChild.nodeValue + "입니다.";

 

노드의 값 확인

nodeValue 프로퍼티를 사용하면 특정 노드의 값을 확인할 수 있습니다.

 

또한, getAttribute() 메소드는 속성 노드의 속성값을 반환해 줍니다.

 

getAttributeNode() 메소드는 특정 노드에 포함된 속성 노드 그 자체를 반환해 줍니다.

 

 

 

다음 예제는 첫 번째 <priority>요소 노드의 첫 번째 자식 노드의 값을 확인하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

// 첫 번째 <priority>요소의 첫 번째 자식 노드를 반환함.

 

targetNode = xmlObj.getElementsByTagName("priority")[0].firstChild;

 

노드의 값 변경

nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있습니다.

 

또한, setAttribute() 메소드는 속성 노드의 속성값을 변경할 수 있게 해줍니다.

 

요소 노드의 텍스트

요소 노드는 자신이 직접 텍스트값을 가지지는 않습니다.

 

요소 노드의 텍스트는 요소 노드의 자식 노드인 텍스트 노드(text node)에 저장됩니다.

 

따라서 요소 노드의 텍스트 값을 확인하거나 변경하고자 할 때는 요소 노드에 포함된 텍스트 노드에 접근해야 합니다.

 

텍스트 노드의 값 변경

nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경할 수 있습니다.

 

 

 

다음 예제는 첫 번째 <priority>요소 노드의 첫 번째 자식 노드의 값을 "low"로 변경하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

// 첫 번째 <priority>요소의 첫 번째 자식 노드를 반환함.

 

targetNode = xmlObj.getElementsByTagName("priority")[0].firstChild;

 

targetNode.nodeValue = "low"; // nodeValue 속성을 이용하여 텍스트 노드의 값을 변경함.

 

속성 노드의 값 변경

nodeValue 프로퍼티뿐만 아니라 setAttribute() 메소드를 사용하면 속성 노드의 값을 변경할 수 있습니다.

 

setAttribute() 메소드는 속성값을 변경하려는 속성이 존재하지 않으면, 먼저 해당 속성을 생성한 후에 속성값을 설정합니다.

 

 

 

다음 예제는 세 번째 <name>요소 노드의 "korean" 속성값을 "자바스크립트"로 변경하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

targetNode = xmlObj.getElementsByTagName("name")[2]; // 세 번째 <name>요소를 반환함.

 

// 해당 요소에 "korean" 속성의 속성값을 "자바스크립트"로 변경함.

 

targetNode.setAttribute("korean", "자바스크립트");

 

노드의 교체

replaceChild() 메소드를 사용하면 특정 노드 그 자체를 다른 노드로 바꿀 수 있습니다.

 

요소 노드의 교체

replaceChild() 메소드를 사용하면 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있습니다.

 

 

 

replaceChild() 메소드의 원형은 다음과 같습니다.

 

원형

부모노드.replaceChild(새로운자식노드, 기존자식노드);

 

 

 

1. 새로운 자식 노드 : 자식 노드 리스트에 새롭게 추가할 요소 노드를 전달합니다.

 

2. 기존 자식 노드 : 자식 노드 리스트에서 제거할 요소 노드를 전달합니다.

 

 

 

다음 예제는 첫 번째 <name>요소 노드를 제거하고, 세 번째 <name>요소 노드를 첫 번째 <name>요소 노드의 자리로 옮기는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML;

 

nameList = xmlObj.getElementsByTagName("name"); // 모든 <name>요소를 선택함.

 

parentNode = nameList[0].parentNode; // 첫 번째 <name>요소의 부모 요소를 선택함.

 

// 세 번째 <name>요소를 첫 번째 <name>요소 자리에 교체함.

 

parentNode.replaceChild(nameList[2], nameList[0]);

 

텍스트 노드의 데이터 대체

replaceData() 메소드를 사용하면 텍스트 노드의 텍스트 데이터를 바꿀 수 있습니다.

 

 

 

replaceData() 메소드의 원형은 다음과 같습니다.

 

원형

텍스트노드.replaceData(오프셋, 교체할문자수, 새로운데이터);

 

 

 

1. 오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 문자부터 교체할지를 전달합니다.

 

2. 교체할 문자 수 : 기존 텍스트 노드의 데이터로부터 교체할 총 문자 수를 전달합니다.

 

3. 새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달합니다.

 

 

 

다음 예제는 세 번째 <name>요소 노드의 텍스트 노드의 데이터에서 두 번째 문자부터 세 글자를 "Query"로 대체하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

// 세 번째 <name>요소의 텍스트 노드를 반환함.

 

javaName = xmlObj.getElementsByTagName("name")[2].firstChild;

 

// 텍스트 데이터의 두 번째 문자부터 세 글자를 "Query"로 대체함.

 

javaName.replaceData(1, 3, "Query");

replaceData() 메소드뿐만 아니라 nodeValue 프로퍼티를 이용해도 텍스트 노드의 데이터를 대체할 수 있습니다.

 

 

노드의 추가

다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있습니다.

 

 

 

1. appendChild()

 

2. insertBefore()

 

3. insertData()

 

appendChild() 메소드

appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가합니다.

 

 

 

다음 예제는 새로운 <paradigm>요소 노드를 생성하고, 생성한 요소 노드를 첫 번째 <language>요소 노드의 마지막 자식 요소 노드로 추가하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.

 

newNode = xmlObj.createElement("paradigm"); // 새로운 <paradigm>요소를 생성함.

 

firstLang.appendChild(newNode); // 첫 번째 <language>요소에 새로운 요소를 추가함.

위의 예제에서 createElement() 메소드는 인수로 전달받은 값을 nodeName의 값으로 하는 새로운 요소 노드를 생성합니다.

 

따라서 createElement() 메소드는 nodeType의 값이 1이며, nodeValue의 값은 undefined인 새로운 노드를 반환합니다.

 

insertBefore() 메소드

insertBefore() 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가합니다.

 

 

 

insertBefore() 메소드의 원형은 다음과 같습니다.

 

원형

부모노드.insertBefore(새로운자식노드, 기준자식노드);

 

 

 

1. 새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달합니다.

 

2. 기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 앞에 새로운 노드가 추가됩니다.

 

 

 

다음 예제는 새로운 요소 노드를 생성하고, 그 노드를 노드 리스트의 두 번째 요소 노드 앞에 추가하는 예제입니다.

 

다음 예제는 새로운 <paradigm>요소 노드를 생성하고, 생성한 요소 노드를 첫 번째 <language>요소의 두 번째 자식 요소 노드로 추가하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.

 

newNode = xmlObj.createElement("paradigm"); // 새로운 <paradigm>요소 노드를 생성함.

 

// 자식 노드 중 두 번째 요소 노드 앞에 새로운 요소 노드를 추가함.

 

firstLang.insertBefore(newNode, firstLang.childNodes[2]);

 

위의 예제에서 새롭게 생성된 paradigm 요소 노드는 노드 리스트의 두 번째 요소 노드 앞에 추가됩니다.

 

따라서 결과적으로 노드 리스트의 두 번째 요소 노드는 새롭게 추가된 paradigm 요소 노드가 됩니다.

 

기준 자식 노드에 null 값을 전달하면 새로운 노드는 자식 노드 리스트의 맨 마지막 노드로 추가됩니다.

 

즉 appendChild() 메소드와 완전히 같은 동작을 하게 됩니다.

 

insertData() 메소드

insertData() 메소드는 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가합니다.

 

 

 

insertData() 메소드의 원형은 다음과 같습니다.

 

원형

텍스트노드.insertData(오프셋, 새로운데이터);

 

 

 

1. 오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달합니다.

 

2. 새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달합니다.

 

 

 

다음 예제는 세 번째 <name>요소 노드의 텍스트 노드의 데이터 끝 부분에 "Script"를 추가하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

javaName = xmlObj.getElementsByTagName("name")[2].firstChild; // 세 번째 <name>요소의 텍스트 노드를 반환함.

 

 

 

javaName.insertData(1, "Script"); // 텍스트 데이터의 두 번째 문자 위치에 "Script"를 추가함.

 

javaName.insertData(2, "Script"); // 텍스트 데이터의 세 번째 문자 위치에 "Script"를 추가함.

 

javaName.insertData(3, "Script"); // 텍스트 데이터의 네 번째 문자 위치에 "Script"를 추가함.

 

javaName.insertData(4, "Script"); // 텍스트 데이터의 다섯 번째 문자 위치에 "Script"를 추가함.

 

위의 예제처럼 오프셋을 기존 텍스트 데이터의 길이로 전달하면, 기존 텍스트의 끝에 새로운 텍스트를 추가할 수 있습니다.

 

노드의 생성

생성할 노드의 종류에 따라 다음과 같은 메소드를 사용할 수 있습니다.

 

 

 

1. createElement()

 

2. createAttribute()

 

3. createTextNode()

 

요소 노드의 생성

createElement() 메소드를 사용하여 새로운 요소 노드를 만들 수 있습니다.

 

 

 

다음 예제는 새로운 <paradigm>요소 노드를 생성하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.

 

newNode = xmlObj.createElement("paradigm"); // 새로운 <paradigm>요소 노드를 생성함.

 

firstLang.appendChild(newNode); // 첫 번째 <language>요소에 새로운 요소를 추가함.

 

 

속성 노드의 생성

createAttribute() 메소드를 사용하여 새로운 속성 노드를 만들 수 있습니다.

 

 

 

만약 같은 이름의 속성 노드가 이미 존재하면, 기존의 속성 노드는 새로운 속성 노드로 대체됩니다.

 

이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때에는 setAttribute() 메소드를 사용할 수 있습니다.

 

 

 

다음 예제는 새로운 <anotherVersion>속성 노드를 생성하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

versionElement = xmlObj.getElementsByTagName("version")[3]; // 네 번째 <version>요소를 반환함.

 

newAttrNode = xmlObj.createAttribute("anotherVersion"); // 새로운 anotherVersion 속성 노드를 생성함.

 

newAttrNode.nodeValue = "2.7.12"; // 새로운 속성 노드에 속성값을 설정함.

 

versionElement.setAttributeNode(newAttrNode); // 네 번째 <version>요소에 새로운 속성 노드를 추가함.

 

document.getElementById("text").innerHTML =

 

"another version : " + versionElement.getAttribute("anotherVersion");

 

텍스트 노드의 생성

createTextNode() 메소드를 사용하여 새로운 텍스트 노드를 만들 수 있습니다.

 

 

 

다음 예제는 <paradigm>요소 노드에 새롭게 생성한 텍스트 노드를 추가하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

thirdLang = xmlObj.getElementsByTagName("language")[2]; // 세 번째 <language>요소를 반환함.

 

newNode = xmlObj.createElement("paradigm"); // 새로운 <paradigm>요소를 생성함.

 

newTextNode = xmlObj.createTextNode("객체 지향"); // 새로운 텍스트 노드를 생성함.

 

newNode.appendChild(newTextNode); // <paradigm>요소에 텍스트 노드를 추가함.

 

thirdLang.appendChild(newNode); // 세 번째 <language>요소에 새로운 요소를 추가함.

 

노드의 제거

다음 메소드를 사용하면 특정 노드를 제거할 수 있습니다.

 

 

 

1. removeChild()

 

2. removeAttribute()

 

removeChild() 메소드

removeChild() 메소드는 자식 노드 리스트에서 특정 자식 노드를 제거합니다.

 

 

 

이 메소드는 성공적으로 노드가 제거되면 제거된 노드를 반환합니다.

 

노드가 제거될 때는 제거되는 노드의 자식 노드들도 다 같이 제거됩니다.

 

 

 

다음 예제는 첫 번째 <language>요소 노드에서 <category>요소 노드를 제거하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.

 

removedNode = firstLang.removeChild(firstLang.childNodes[3]); // <category>요소를 제거함.

 

result += "<br>제거된 요소 노드는 " + removedNode.nodeName + "입니다.";

 

removeAttribute() 메소드

removeAttribute() 메소드는 속성의 이름을 이용하여 특정 속성 노드를 제거합니다.

 

 

 

다음 예제는 첫 번째 <priority>요소 노드에서 rating 속성 노드를 제거하는 예제입니다.

 

예제

 

 

firstStandard = xmlObj.getElementsByTagName("priority")[0]; // 첫 번째 <priority>요소를 반환함.

 

firstStandard.removeAttribute("rating"); // 첫 번째 <priority>요소의 rating 속성을 제거함.

 

노드의 복제

cloneNode() 메소드를 사용하면 특정 노드를 복제할 수 있습니다.

 

cloneNode() 메소드

cloneNode() 메소드는 기존의 존재하는 노드와 똑같은 새로운 노드를 생성하여 반환합니다.

 

 

 

cloneNode() 메소드의 원형은 다음과 같습니다.

 

원형

복제할노드.cloneNode(자식노드복제여부);

 

 

 

- 자식 노드 복제 여부 : 전달된 값이 true이면 복제되는 노드의 모든 속성 노드와 자식 노드도 같이 복제하며, false이면 속성 노드만 복제하고 자식 노드는 복제하지 않습니다.

 

 

 

다음 예제는 첫 번째 <language>요소 노드의 <name>요소를 복제하여, 해당 요소를 첫 번째 <language>요소 노드의 마지막 자식 노드로 추가하는 예제입니다.

 

예제

xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.

 

firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.

 

copiedNode = firstLang.childNodes[1].cloneNode(true); // <name>요소를 복제함.

 

firstLang.appendChild(copiedNode); // 첫 번째 <language>요소에 복제한 <name>요소를 추가함.