Javascript로 XML 파싱하기

대부분의 웹 브라우저에서는 XML parser를 지원합니다. XML DOM은 XML에 접근하여 조작할 수 있는 기능을 포함하고 있습니다.
XML parser는 XML 데이터를 받아들여(String이든 평문이든) XML DOM 객체로 변환시켜 줍니다.
이를 통해 Javascript를 이용하면 웹 브라우저에서도 XML을 파싱할 수가 있습니다.

Xml DOM 예제

간단하게 짧은 XML 데이터를 받아들여 원하고자 하는 태그의 text를 출력하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>XML Parser</title>
    <script>
        function parseText() {
            var xmlText, xmlParser, xmlDoc;
            xmlText = "<country><name>korea</name>" +
                "<capital>seoul</capital></country>"
            xmlParser = new DOMParser();
            xmlDoc = xmlParser.parseFromString(xmlText, "text/xml");
            document.getElementById("text").innerHTML =
                xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue
                + "의 수도는 " +
                xmlDoc.getElementsByTagName("capital")[0].childNodes[0].nodeValue + " 입니다.";
        }
    </script>
</head>

<body>
    <h1>문자열 파싱</h1>
    <button onclick="parseText()">파싱하기!</button>
    <p id="text"></p>
</body>

</html>

xmlText라는 문자열에 XML 데이터가 들어가 있습니다.

이를 DOMParser를 이용하여 XML DOM 형태로 변환시켜 줍니다.

이제 parseFromString() 메소드를 통해 문자열을 xml 형식으로 바꾸어 준 뒤, 이를 xmlDoc에 저장합니다.

이제는 xmlDoc을 통해 노드, 노드의 text등에 접근할 수 있습니다.

간단하게 'name' 'capital' 두 가지 태그로 검색하여 간단한 문자열을 출력해 주는 코드입니다.

childNodes[] 배열은 해당 노드의 자식 노드들이 들어가 있으며, 현재 xml 데이터의 경우 자식 노드가 1개씩 밖에 없기 때문에

0으로 접근합니다. 이렇게 인덱스로도 자식 노드들에 접근할 수가 있으며, text값은 nodeValue로 얻을 수 있습니다.

실행 결과는 다음과 같습니다. 아래 버튼을 눌러보세요.

XML Parser