363. (javaScript) [기본] 자바스크립트 DOMParser 사용해 xml 데이터 파싱 및 특정 tag 태그 값 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트)

- 사전 필요 : xml 형식 더미 데이터 준비

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

    <script>


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
        -----------------------------------------
        2. DOMParser 인터페이스 는 DOM Document 문서에 맞는 XML 및 HTML 소스 코드를 해석할 수 있습니다
        -----------------------------------------
        3. 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/API/DOMParser
        -----------------------------------------
        */



        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("======================================================");
            console.log("[WebFile] : [window onload] : [start]");
            console.log("======================================================");
            console.log(""); 


            // [XML 형식 문자열 선언]
            var xmlText = "";
            xmlText += "<country>";
            xmlText += "<name>korea</name>";
            xmlText += "<capital>seoul</capital>";
            xmlText += "<date>2024</date>";
            xmlText += "</country>";


            // [DOMParser 데이터 파싱 객체 선언]
            var xmlParser = new DOMParser();


            // [xmlParser 사용해 xml doc 생성]
            var xmlDoc = xmlParser.parseFromString(xmlText, "text/xml");


            // [xmlDoc 에서 특정 xml 태그 값 확인]
            var name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue; // [name 태그에서 첫번째] : ex - 두번째는 ("name")[1]
            var capital = xmlDoc.getElementsByTagName("capital")[0].childNodes[0].nodeValue; // [capital 태그에서 첫번째] : ex - 두번째는 ("capital")[1]
            var date = xmlDoc.getElementsByTagName("date")[0].childNodes[0].nodeValue; // [date 태그에서 첫번째] : ex - 두번째는 ("date")[1]

            console.log("");
            console.log("======================================================");
            console.log("[xmlText] : " + xmlText);
            console.log("------------------------------------------");
            console.log("[name] : " + name);
            console.log("[capital] : " + capital);
            console.log("[date] : " + date);
            console.log("======================================================");
            console.log(""); 

        }; 

        
    </script>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[결과 출력]
-----------------------------------------------------------------------------------------

======================================================
[xmlText] : <country><name>korea</name><capital>seoul</capital><date>2024</date></country>
------------------------------------------
[name] : korea
[capital] : seoul
[date] : 2024
======================================================

-----------------------------------------------------------------------------------------

---