• 코드:
​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
                    traversingNodeTree(xmlHttp);
13
                }
14
            };
15
            xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
16
            xmlHttp.send();
17
        }
18
​
19
        function traversingNodeTree(xmlHttp) {
20
            var xmlObj, nodeList, result, idx;
21
            xmlObj = xmlHttp.responseXML;   // 요청한 데이터를 XML DOM 객체로 반환함.
22
            nodeList = xmlObj.documentElement.childNodes;   // XML 문서 노드의 자식 노드를 반환함.
23
            result = "XML 문서 노드의 자식 노드<br>";
24
            for(idx = 0; idx < nodeList.length; idx++) {
25
                if(nodeList[idx].nodeType == 1) {           // 요소 노드만을 출력함.
26
                    result += nodeList[idx].nodeName + "<br>";
27
                }
28
            }
29
            document.getElementById("text").innerHTML = result;
30
        }
31
    </script>
32
</head>
33
​
34
<body>
35
​
36
    <h1>노드 트리를 연속적으로 탐색하여 접근하는 방법</h1>
37
    <button onclick="loadDoc()">노드 트리 탐색하기!</button>
38
    <p id="text"></p>
39
40
</body>
41
​
42
</html>