<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>