노드의 관리
노드의 추가
다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있습니다.
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인 새로운 노드를 반환합니다.
이번 수업의 예제에서 사용되는 programming_languages.xml 파일의 코드는 다음과 같습니다.
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>요소를 추가함.
다음 그림은 위 예제의 동작을 순서대로 나타낸 그림입니다.
