©TCP-tryWWW

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