365. (javaScript) [활용] 자바스크립트 DOMParser 사용해 xml 데이터 querySelectorAll 특정 태그 값 파싱 수행

---

[개발 환경 설정]

​

개발 툴 : 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 += "<world>";
            xmlText += "  <country>";
            xmlText += "    <name>korea</name>";
            xmlText += "    <capital>seoul</capital>";
            xmlText += "    <date>2024</date>";
            xmlText += "  </country>";
            xmlText += "  <country>";
            xmlText += "    <name>usa</name>";
            xmlText += "    <capital>newyork</capital>";
            xmlText += "    <date>2023</date>";
            xmlText += "  </country>";
            xmlText += "</world>";


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


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


            // [xmlDoc 에서 특정 xml 태그 값 확인]
            let name = xmlDoc.querySelectorAll("country name"); // [country 태그의 name 들 값만 확인]
            name.forEach(value => {
                console.log("[name] : " + value.textContent);
            });

        }; 

        
    </script>

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





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

[name] : korea
[name] : usa

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

---