• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>XML Node</title>
7
    <script>
8
        function loadDoc() {
9
            var xmlHttp = new XMLHttpRequest();
10
            xmlHttp.onreadystatechange = function() {
11
                if(this.status == 200 && this.readyState == this.DONE) {
12
                    changeNode(xmlHttp);
13
                }
14
            };
15
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
16
            xmlHttp.send();
17
        }
18
​
19
        function changeNode(xmlHttp) {
20
            var xmlObj, nameList, result, idx, parentNode;
21
            xmlObj = xmlHttp.responseXML;
22
            nameList = xmlObj.getElementsByTagName("name");     // 모든 <name>요소를 선택함.
23
​
24
            result = "변경 전 :<br>";
25
            for(idx = 0; idx < nameList.length; idx++) {        // 모든 <name>요소를 출력함.
26
                result += nameList[idx].firstChild.nodeValue + "<br>";
27
            }
28
            result += "<br>";
29
​
30
            parentNode = nameList[0].parentNode;                // 첫 번째 <name>요소의 부모 요소를 선택함.
31
            // 세 번째 <name>요소를 첫 번째 <name>요소 자리에 교체함.
32
            parentNode.replaceChild(nameList[2], nameList[0]);
33
34
            result += "변경 후 :<br>";
35
            for(idx = 0; idx < nameList.length; idx++) {        // 모든 <name>요소를 출력함.
36
                result += nameList[idx].firstChild.nodeValue + "<br>";
37
            }
38
            document.getElementById("text").innerHTML = result;
39
        }
40
    </script>
41
</head>
42
​
43
<body>
44
​
45
    <h1>요소 노드의 교체</h1>
46
    <button onclick="loadDoc()">요소 노드 교체!</button>
47
    <p id="text"></p>
48
49
</body>
50
​
51
</html>