364. (javaScript) [활용] 자바스크립트 DOMParser 사용해 for 문 수행 xml 데이터 children 자식 노드 값 확인

---

[개발 환경 설정]

​

개발 툴 : 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 태그 값 확인]
            var country = xmlDoc.getElementsByTagName("country");

            for(let country_node of country){ // 가져온 country 순회

                for(let child_node of country_node.children) { // food태그안에 또 여러가지 태그가 있으니 또 순회
                    console.log("[child_node] : " + child_node.textContent);
                }
            }

        }; 

        
    </script>

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





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

[child_node] : korea
[child_node] : seoul
[child_node] : 2024
[child_node] : usa
[child_node] : newyork
[child_node] : 2023

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

---