XML 노드

Mark Up/XML XML 노드

Dexter_- 2018. 11. 5. 18:07

728x90

노드 (node)

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

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

노드의 종류

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

XML 문서를 구성하는 대표적인 노드의 종류는 다음과 같다.

노드	설명
문서 노드(document node)	XML 문서 전체를 나타내는 노드.
요소 노드(element node)	모든 XML 요소는 모두 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드다.
속성 노드(attribute node)	XML 요소의 속성은 모두 속성 노드이며, 요소 노드에 관한 정보를 가지고 있는 노드이다. 하지만 속성 노드는 해당 요소 노드의 자식 노드(child node)에 포함되지는 않음.
텍스트 노트(text node)	XML 문서 내의 텍스트는 모두 텍스트 노드이다.
주석 노드(comment node)	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>

다음 그림은 위의 XML 파일을 노드 트리로 표현한 그림이다.

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

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

노드 간의 관계

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

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

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

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

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

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

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

노드로의 접근

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

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

getElementsByTagName() 메소드를 이용하는 방법
노드 트리를 연속적으로 탐색하여 접근하는 방법
노드 간의 관계를 이용하여 접근하는 방법

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;

예제에서 사용되는 programming_languages.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>
    <language>
        <name>CSS</name>
        <category>web</category>
        <developer>W3C</developer>
        <version status="stable">3.0</version>
        <priority rating="3">middle</priority>
    </language>
    <language>
        <name korean="자바">Java</name>
        <category>application</category>
        <developer>Oracle</developer>
        <version status="stable">8.91</version>
        <priority rating="2">high</priority>
    </language>
    <language>
        <name korean="파이썬">Python</name>
        <category>application</category>
        <developer>Python</developer>
        <version status="stable">3.52</version>
        <priority rating="4">middle</priority>
    </language>
</programming_languages>

💡 TIP : nodeType 프로퍼티는 해당 노드의 타입을 저장하는 프로퍼티로, 수정할 수 없는 읽기 전용 프로퍼티이

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

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

parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
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.reponseXML;    			// 요청한 데이터를 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부터 시작하는 인덱스를 이용하여 접근할 수 있다.

다음 그림은 programming_languages.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>
    <language>
        <name>CSS</name>
        <category>web</category>
        <developer>W3C</developer>
        <version status="stable">3.0</version>
        <priority rating="3">middle</priority>
    </language>
    <language>
        <name korean="자바">Java</name>
        <category>application</category>
        <developer>Oracle</developer>
        <version status="stable">8.91</version>
        <priority rating="2">high</priority>
    </language>
    <language>
        <name korean="파이썬">Python</name>
        <category>application</category>
        <developer>Python</developer>
        <version status="stable">3.52</version>
        <priority rating="4">middle</priority>
    </language>
</programming_languages>

다음 예제는 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 + "입니다.";

위의 예제에서 사용된 programming_languages.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>
    <language>
        <name>CSS</name>
        <category>web</category>
        <developer>W3C</developer>
        <version status="stable">3.0</version>
        <priority rating="3">middle</priority>
    </language>
    <language>
        <name korean="자바">Java</name>
        <category>application</category>
        <developer>Oracle</developer>
        <version status="stable">8.91</version>
        <priority rating="2">high</priority>
    </language>
    <language>
        <name korean="파이썬">Python</name>
        <category>application</category>
        <developer>Python</developer>
        <version status="stable">3.52</version>
        <priority rating="4">middle</priority>
    </language>
</programming_languages>

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

노드에 대한 정보

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

nodeType
nodeName
nodeValue

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

이 글에서 계속 사용하고 있는 XML 파일에서 각 노드 타입의 프로퍼티 값을 보여주는 예제 그림이다.

nodeType 프로퍼티

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

대표적인 XML 노드별 nodeType 프로퍼티 값은 다음과 같다.

노드 타입	nodeType 프로퍼티 값
요소 노드(element node)	1
속성 노드(attribute node)	2
텍스트 노드(text node)	3
주석 노드(comment node)	8
문서 노드(document node)	9

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

🔔 예제)

var xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.
document.getElementById("text").innerHTML = // XML 문서 노드의 타입을 반환함.
"XML 문서 노드의 타입은 " + xmlObj.nodeType + "입니다.";

아래의 예제에서 사용되는 programming_languages.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>
    <language>
        <name>CSS</name>
        <category>web</category>
        <developer>W3C</developer>
        <version status="stable">3.0</version>
        <priority rating="3">middle</priority>
    </language>
    <language>
        <name korean="자바">Java</name>
        <category>application</category>
        <developer>Oracle</developer>
        <version status="stable">8.91</version>
        <priority rating="2">high</priority>
    </language>
    <language>
        <name korean="파이썬">Python</name>
        <category>application</category>
        <developer>Python</developer>
        <version status="stable">3.52</version>
        <priority rating="4">middle</priority>
    </language>
</programming_languages>

nodeName 프로퍼티

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

노드 타입	nodeName 프로퍼티 값
문서 노드(document node)	#document
요소 노드(element node)	해당 태그 이름
속성 노드(attribute node)	해당 속성 이름
텍스트 노드(text node)	#text

🔔 예제)

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

// XML 문서 노드의 첫 번째 요소 노드를 반환함.
firstElementNode = xmlObj.documentElement.childNodes[1];

// 해당 노드의 첫 번째 요소 노드의 이름을 반환함.
document.getElementById("text").innerHTML = "첫 번째 요소 노드의 이름은 " + firstElementNode.childNodes[1].nodeName + "입니다.";

nodeValue 프로퍼티

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

노드 타입	nodeValue 프로퍼티 값
요소 노드(element node)	undefined
속성 노드(attribute node)	해당 속성의 속성 값
텍스트 노드(text node)	해당 텍스트 문자열

🔔 예제)

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

// XML 문서 노드의 첫 번째 요소 노드를 반환함.
firstElementNode = xmlObj.documentElement.childNodes[1];

// 해당 노드의 첫 번째 요소 노드의 텍스트 노드의 값을 반환함.
document.getElementById("text").innerHTML = "첫 번째 요소 노드의 텍스트 노드값은 " + firstElementNode.childNodes[1].firstChild.nodeValue + "입니다.";

노드의 값 확인

nodeValue 프로퍼티를 사용하면 특정 노드의 값을 확인할 수 있다. 또한, getAttribute() 메소드는 속성 노드의 속성값을 반환해 준다.

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    changeTextValue(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function changeTextValue(xmlHttp) {
            var xmlObj, targetNode, result;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            // 첫 번째 <priority>요소의 첫 번째 자식 노드를 반환함.
            targetNode = xmlObj.getElementsByTagName("priority")[0].firstChild;
            document.getElementById("text").innerHTML = targetNode.nodeValue;
        }
   </script>
</head>
<body>
    <h1>노드의 값 확인</h1>
    <button onclick="loadDoc()">노드의 값 확인!</button>
    <p id="text"></p>    
</body>
</html>

위 예제에서 사용되는 programming_languages.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>
    <language>
        <name>CSS</name>
        <category>web</category>
        <developer>W3C</developer>
        <version status="stable">3.0</version>
        <priority rating="3">middle</priority>
    </language>
    <language>
        <name korean="자바">Java</name>
        <category>application</category>
        <developer>Oracle</developer>
        <version status="stable">8.91</version>
        <priority rating="2">high</priority>
    </language>
    <language>
        <name korean="파이썬">Python</name>
        <category>application</category>
        <developer>Python</developer>
        <version status="stable">3.52</version>
        <priority rating="4">middle</priority>
    </language>
</programming_languages>

노드의 값 변경

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

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

요소 노드의 텍스트

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

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

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

텍스트 노드의 값 변경

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    changeTextValue(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function changeTextValue(xmlHttp) {
            var xmlObj, targetNode, result;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            // 첫 번째 <priority>요소의 첫 번째 자식 노드를 반환함.
            targetNode = xmlObj.getElementsByTagName("priority")[0].firstChild;
            result = "";
            result += "변경 전 : " + targetNode.nodeValue + "<br>";
            targetNode.nodeValue = "low";    // nodeValue 속성을 이용하여 텍스트 노드의 값을 변경함.
            result += "변경 후 : " + targetNode.nodeValue + "<br>";
            document.getElementById("text").innerHTML = result;
        }
   </script>
</head>
<body>
    <h1>텍스트 노드의 값 변경</h1>
    <button onclick="loadDoc()">텍스트 변경!</button>
    <p id="text"></p>    
</body>
</html>

속성 노드의 값 변경

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

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    changeAttributeValue(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function changeAttributeValue(xmlHttp) {
            var xmlObj, targetNode, result;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            targetNode = xmlObj.getElementsByTagName("name")[2];    // 세 번째 <name>요소를 반환함.
            result = "변경 전 : " + targetNode.getAttribute("korean") + "<br>";
            // 해당 요소에 "korean" 속성의 속성값을 "자바스크립트"로 변경함.
            targetNode.setAttribute("korean", "자바스크립트");
            result += "변경 후 : " + targetNode.getAttribute("korean") + "<br>";
            document.getElementById("text").innerHTML = result;
        }
   </script>
</head>
<body>
    <h1>속성 노드의 값 변경</h1>
    <button onclick="loadDoc()">속성값 변경!</button>
    <p id="text"></p>    
</body>
</html>

노드의 교체

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

요소 노드의 교체

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

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

원형

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

새로운 자식 노드 : 자식 노드 리스트에 새롭게 추가할 요소 노드를 전달한다.
기존 자식 노드 : 자식 노드 리스트에서 제거할 요소 노드를 전달한다.

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    changeNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function changeNode(xmlHttp) {
            var xmlObj, nameList, result, idx, parentNode;
            xmlObj = xmlHttp.responseXML;
            nameList = xmlObj.getElementsByTagName("name");        // 모든 <name>요소를 선택함.

            result = "변경 전 :<br>";
            for(idx = 0; idx < nameList.length; idx++) {        // 모든 <name>요소를 출력함.
                result += nameList[idx].firstChild.nodeValue + "<br>";
            }
            result += "<br>";

            parentNode = nameList[0].parentNode;                // 첫 번째 <name>요소의 부모 요소를 선택함.
            // 세 번째 <name>요소를 첫 번째 <name>요소 자리에 교체함.
            parentNode.replaceChild(nameList[2], nameList[0]);
            
            result += "변경 후 :<br>";
            for(idx = 0; idx < nameList.length; idx++) {        // 모든 <name>요소를 출력함.
                result += nameList[idx].firstChild.nodeValue + "<br>";
            }
            document.getElementById("text").innerHTML = result;
        }
   </script>
</head>
<body>
    <h1>요소 노드의 교체</h1>
    <button onclick="loadDoc()">요소 노드 교체!</button>
    <p id="text"></p>    
</body>
</html>

다음 그림은 위 예제의 동작을 순서대로 나타낸 그림이다.

텍스트 노드의 데이터 대체

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

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

원형

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

오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 문자부터 교체할지를 전달한다.
교체할 문자 수 : 기존 텍스트 노드의 데이터로부터 교체할 총 문자 수를 전달한다.
새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달한다.

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    changeData(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function changeData(xmlHttp) {
            var xmlObj, javaName;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            // 세 번째 <name>요소의 텍스트 노드를 반환함.
            javaName = xmlObj.getElementsByTagName("name")[2].firstChild;
            document.getElementById("text").innerHTML = "변경 전 : " + javaName.nodeValue;
            // 텍스트 데이터의 두 번째 문자부터 세 글자를 "Query"로 대체함.
            javaName.replaceData(1, 3, "Query");
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue;
        }
   </script>
</head>
<body>
    <h1>텍스트 노드의 데이터 대체</h1>
    <button onclick="loadDoc()">데이터 대체!</button>
    <p id="text"></p>    
</body>
</html>

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

노드의 추가

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

appendChild( )
insertBefore( )
insertData( )

appendChild() 메소드

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    addNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function addNode(xmlHttp) {
            var xmlObj, firstLang, newNode, node, result, idx;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            firstLang = xmlObj.getElementsByTagName("language")[0];    // 첫 번째 <language>요소를 반환함.

            // 변경 전
            node = firstLang.firstChild;
            result = "변경 전 : <br>";
            for(idx = 0; idx < firstLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + "<br>";
                }
                node = node.nextSibling;
            }
            
            newNode = xmlObj.createElement("paradigm");    // 새로운 <paradigm>요소를 생성함.
            firstLang.appendChild(newNode);                // 첫 번째 <language>요소에 새로운 요소를 추가함.
            
            // <language>요소의 자식 요소 노드를 모두 출력함.
            node = firstLang.firstChild;
            result += "<br>변경 후 : <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;
        }
   </script>
</head>
<body>
    <h1>노드의 추가</h1>
    <button onclick="loadDoc()">노드 추가!</button>
    <p id="text"></p>    
</body>
</html>

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

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

이번 수업의 예제에서 사용되는 programming_languages.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>
    <language>
        <name>CSS</name>
        <category>web</category>
        <developer>W3C</developer>
        <version status="stable">3.0</version>
        <priority rating="3">middle</priority>
    </language>
    <language>
        <name korean="자바">Java</name>
        <category>application</category>
        <developer>Oracle</developer>
        <version status="stable">8.91</version>
        <priority rating="2">high</priority>
    </language>
    <language>
        <name korean="파이썬">Python</name>
        <category>application</category>
        <developer>Python</developer>
        <version status="stable">3.52</version>
        <priority rating="4">middle</priority>
    </language>
</programming_languages>

insertBefore() 메소드

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

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

원형

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

새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달한다.
기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 앞에 새로운 노드가 추가된다.

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    addNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function addNode(xmlHttp) {
            var xmlObj, firstLang, newNode, node, result, idx;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            firstLang = xmlObj.getElementsByTagName("language")[0];        // 첫 번째 <language>요소를 반환함.

            // 변경 전
            node = firstLang.firstChild;
            result = "변경 전 : <br>";
            for(idx = 0; idx < firstLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + "<br>";
                }
                node = node.nextSibling;
            }

            newNode = xmlObj.createElement("paradigm");    // 새로운 <paradigm>요소 노드를 생성함.
            // 자식 노드 중 두 번째 요소 노드 앞에 새로운 요소 노드를 추가함.
            firstLang.insertBefore(newNode, firstLang.childNodes[2]);
            
            // <language>요소의 자식 요소 노드를 모두 출력함.
            node = firstLang.firstChild;
            result += "<br>변경 후 : <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;
        }
    </script>
</head>
<body>
    <h1>노드의 추가</h1>
    <button onclick="loadDoc()">노드 추가!</button>
    <p id="text"></p>    
</body>
</html>

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

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

💡 TIP : 기준 자식 노드에 null값을 전달하면 새로운 노드는 자식 노드 리스트의 맨 마지막 노드로 추가된다. 즉 appendChild() 메소드와 완전히 같은 동작을 하게 된다.

insertData() 메소드

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

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

원형

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

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    addData(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function addData(xmlHttp) {
            var xmlObj, javaName;
            xmlObj = xmlHttp.responseXML;
            javaName = xmlObj.getElementsByTagName("name")[2].firstChild;    // 세 번째 <name>요소의 텍스트 노드를 반환함.
            originTextData = javaName.nodeValue;    // 원본 텍스트 데이터

            document.getElementById("text").innerHTML = "변경 전 : " + javaName.nodeValue + "<br>";

            javaName.insertData(1, "Script");        // 텍스트 데이터의 두 번째 문자 위치에 "Script"를 추가함.
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue + "<br>";
            javaName.nodeValue = originTextData;    // 텍스트 데이터 원상 복구

            javaName.insertData(2, "Script");        // 텍스트 데이터의 세 번째 문자 위치에 "Script"를 추가함.
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue + "<br>";
            javaName.nodeValue = originTextData;    // 텍스트 데이터 원상 복구

            javaName.insertData(3, "Script");        // 텍스트 데이터의 네 번째 문자 위치에 "Script"를 추가함.
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue + "<br>";
            javaName.nodeValue = originTextData;    // 텍스트 데이터 원상 복구

            javaName.insertData(4, "Script");        // 텍스트 데이터의 다섯 번째 문자 위치에 "Script"를 추가함.
            document.getElementById("text").innerHTML += "<br>변경 후 : " + javaName.nodeValue;
        }
    </script>
</head>
<body>
    <h1>데이터의 추가</h1>
    <button onclick="loadDoc()">데이터 추가!</button>
    <p id="text"></p>    
</body>
</html>

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

노드의 생성

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

createElement()
createAttribute()
createTextNode()

요소 노드의 생성

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    createNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function createNode(xmlHttp) {
            var xmlObj, firstLang, newNode, node, result, idx;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            firstLang = xmlObj.getElementsByTagName("language")[0];    // 첫 번째 <language>요소를 반환함.

            // 변경 전
            node = firstLang.firstChild;
            result = "변경 전 : <br>";
            for(idx = 0; idx < firstLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + "<br>";
                }
                node = node.nextSibling;
            }
            
            newNode = xmlObj.createElement("paradigm");    // 새로운 <paradigm>요소 노드를 생성함.
            firstLang.appendChild(newNode);                // 첫 번째 <language>요소에 새로운 요소를 추가함.
            
            // <language>요소의 자식 요소 노드를 모두 출력함.
            node = firstLang.firstChild;
            result += "<br>변경 후 : <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;
        }
    </script>
</head>
<body>
    <h1>노드의 생성</h1>
    <button onclick="loadDoc()">요소 노드 생성!</button>
    <p id="text"></p>    
</body>
</html>

속성 노드의 생성

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

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

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    createNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function createNode(xmlHttp) {
            var xmlObj, versionElement, newNode, newAttrNode;
            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");
        }
    </script>
</head>
<body>
    <h1>노드의 생성</h1>
    <button onclick="loadDoc()">속성 노드 생성!</button>
    <p id="text"></p>    
</body>
</html>

텍스트 노드의 생성

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    createNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function createNode(xmlHttp) {
            var xmlObj, thirdLang, newNode, newTextNode, node, result, idx;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            thirdLang = xmlObj.getElementsByTagName("language")[2];    // 세 번째 <language>요소를 반환함.

            // 변경 전
            node = thirdLang.firstChild;
            result = "변경 전 : <br>";
            for(idx = 0; idx < thirdLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + " : " + node.firstChild.nodeValue + "<br>";
                }
                node = node.nextSibling;
            }
            
            newNode = xmlObj.createElement("paradigm");            // 새로운 <paradigm>요소를 생성함.
            newTextNode = xmlObj.createTextNode("객체 지향");    // 새로운 텍스트 노드를 생성함.
            newNode.appendChild(newTextNode);                    // <paradigm>요소에 텍스트 노드를 추가함.
            thirdLang.appendChild(newNode);                        // 세 번째 <language>요소에 새로운 요소를 추가함.
            
            // <language>요소의 자식 요소 노드를 모두 출력함.
            node = thirdLang.firstChild;
            result += "<br>변경 후 : <br>";
            for(idx = 0; idx < thirdLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + " : " + node.firstChild.nodeValue + "<br>";
                }
                node = node.nextSibling;
            }
            document.getElementById("text").innerHTML = result;
        }
    </script>
</head>
<body>
    <h1>노드의 생성</h1>
    <button onclick="loadDoc()">텍스트 노드 생성!</button>
    <p id="text"></p>    
</body>
</html>

노드의 제거

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

removeChild()
removeAttribute()

removeChild() 메소드

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

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

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    removeNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function removeNode(xmlHttp) {
            var xmlObj, firstLang, removedNode, node, result, idx;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            firstLang = xmlObj.getElementsByTagName("language")[0];    // 첫 번째 <language>요소를 반환함.

            // 변경 전
            node = firstLang.firstChild;
            result = "변경 전 : <br>";
            for(idx = 0; idx < firstLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + "<br>";
                }
                node = node.nextSibling;
            }
            
            removedNode = firstLang.removeChild(firstLang.childNodes[3]);    // <category>요소를 제거함.
            
            // <language>요소의 자식 요소 노드를 모두 출력함.
            node = firstLang.firstChild;
            result += "<br>변경 후 : <br>";
            for(idx = 0; idx < firstLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + "<br>";
                }
                node = node.nextSibling;
            }
            result += "<br>제거된 요소 노드는 " + removedNode.nodeName + "입니다.";
            document.getElementById("text").innerHTML = result;
        }
    </script>
</head>
<body>
    <h1>노드의 제거</h1>
    <button onclick="loadDoc()">요소 노드 제거!</button>
    <p id="text"></p>    
</body>
</html>

removeAttribute() 메소드

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    removeNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function removeNode(xmlHttp) {
            var xmlObj, firstStandard, result;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            firstStandard = xmlObj.getElementsByTagName("priority")[0];    // 첫 번째 <priority>요소를 반환함.
            
            result = "변경 전 : ";
            result += firstStandard.getAttribute("rating");    // rating 속성의 속성값을 출력함.
            firstStandard.removeAttribute("rating");        // 첫 번째 <priority>요소의 rating 속성을 제거함.
            result += "<br>변경 후 : " + firstStandard.getAttribute("rating");    // rating 속성의 속성값을 출력함.
            document.getElementById("text").innerHTML = result;
        }
    </script>
</head>
<body>
    <h1>노드의 제거</h1>
    <button onclick="loadDoc()">속성 노드 제거!</button>
    <p id="text"></p>    
</body>
</html>

노드의 복제

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

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

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

원형

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

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

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

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XML Node</title>
    <script>
        function loadDoc() {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(this.status == 200 && this.readyState == this.DONE) {
                    copyNode(xmlHttp);
                }
            };
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
            xmlHttp.send();
        }

        function copyNode(xmlHttp) {
            var xmlObj, firstLang, copiedNode, node, result, idx;
            xmlObj = xmlHttp.responseXML;    // 요청한 데이터를 XML DOM 객체로 반환함.
            firstLang = xmlObj.getElementsByTagName("language")[0];    // 첫 번째 <language>요소를 반환함.

            // 변경 전
            node = firstLang.firstChild;
            result = "변경 전 : <br>";
            for(idx = 0; idx < firstLang.childNodes.length; idx++) {
                if(node.nodeType == 1) {
                    result += node.nodeName + "<br>";
                }
                node = node.nextSibling;
            }
            
            copiedNode = firstLang.childNodes[1].cloneNode(true);    // <name>요소를 복제함.
            firstLang.appendChild(copiedNode);        // 첫 번째 <language>요소에 복제한 <name>요소를 추가함.
            
            // <language>요소의 자식 요소 노드를 모두 출력함.
            node = firstLang.firstChild;
            result += "<br>변경 후 : <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;
        }
    </script>
</head>
<body>
    <h1>노드의 복제</h1>
    <button onclick="loadDoc()">노드 복제!</button>
    <p id="text"></p>    
</body>
</html>

728x90

저작자표시 비영리 변경금지

'Mark Up > XML' 카테고리의 다른 글

XML/DTD (0)	2018.11.09
XML/XPath (0)	2018.11.09
XML DOM (0)	2018.11.05
XSLT (1)	2018.11.05
XML 구조 (0)	2018.11.02

Embedded Software Embedded Software

노드 (node)

노드의 종류

노드 트리 (node tree)

노드 간의 관계

노드로의 접근

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

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

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

빈 텍스트 노드의 처리

노드 리스트 (node list)

노드 리스트의 길이

속성 리스트

노드에 대한 정보

nodeType 프로퍼티

nodeName 프로퍼티

nodeValue 프로퍼티

노드의 값 확인

노드의 값 변경

요소 노드의 텍스트

텍스트 노드의 값 변경

속성 노드의 값 변경

노드의 교체

요소 노드의 교체

텍스트 노드의 데이터 대체

노드의 추가

appendChild() 메소드

insertBefore() 메소드

insertData() 메소드

노드의 생성

요소 노드의 생성

속성 노드의 생성

텍스트 노드의 생성

노드의 제거

removeChild() 메소드

removeAttribute() 메소드

노드의 복제

'Mark Up > XML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바