Daily coding

XML : 데이터 parsing 하기 본문

Front-end/비동기통신

XML : 데이터 parsing 하기

sunnnkim 2020. 1. 15. 21:09

* XML 데이터는 DOMParser 객체를 이용하여 문자열로 변환할 수 있다

 

1. 데이터 파싱하기

 

// xml 데이터형식을 가진 문자열 데이터를 생성하여 변수에 넣기

var xmltext = "<bookstore>" + // root tag 만들기 (=head), 2개

                            "<book>" + // node : <book> <title> <author> <year> ...

                                "<title>탈무드</title>" +

                                 "<author>man</author>" +

                                 "<year>2001</year>" +

                         "</book>" +

                          "<book>" + //반드시 위아래 xml태그의 종류와 개수가 똑같아야 함

                                "<title>이솝이야기</title>" +

                                "<author>woman</author>" +

                                "<year>2004</year>" +

                        "</book>" +

                  "</bookstore>";

 

 

// 파싱을 위한 객체 생성 

var parser;

// 문자열을 xml로 변환하여 담을 변수 선언

var xmlDoc;

 

 

// 파싱하기

parser = new DOMParser();

xmlDoc = parser.parseFromString( xmltext, "text/xml" );

 

// DOMParser() : parsing을 위한 객체 생성 (사용자 지정함수 아님)

// parseFromString : 문자열 데이터를 xml로 변환하는 함수 ( 문자열데이터변수, "text/xml" )

// xmltext : xml 데이터 담은 변수(위에서 작성)



 

2. 파싱한 데이터를 p태그에 출력

 

// p태그 불러오기

 

document.getElementById("demo").innerHTML

 = xmlDoc.getElementsByTagName("book")[0].childNodes[0].nodeName;

     // book[0]-> (title, author, year) : book 태그의 자식노드들 중 0번째 인덱스

     // nodeName = "title"이 출력

     // getElementsByTagName("태그이름")[인덱스].childNodes[인덱스].nodeName;

          => 해당 n번째 태그의 m번째 자식객체의 태그이름 출력

     // 결과 : TITLE

 

= xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue;

     // book[0]-> title[0] -> nodes[0] ( = title )

     // nodeValue : 태그 안에 데이터를 가져옴

     // nodeNames에서 한단계 더 자식 태그로 들어가야 데이터 불러올 수 있다.

     // 결과 : 탈무드

 

= xmlDoc.getElementsByTagName("book")[0].childNodes.length;

// length : node의 개수(길이)를 알 수 있음

// 배열의 인덱스를 사용하지 않고 childNodes의 property로 사용해야 함

 

 

<script>
var xmltext = "<bookstore>" +    // root tag 만들기 (=head), 2개
                "<book>" +      // node : <book> <title> <author> <year> ...
                    "<title>탈무드</title>" +  
                    "<author>man</author>" +
                    "<year>2001</year>" + 
                "</book>" +
                "<book>" + //반드시 위아래 xml태그의 종류와 개수가 똑같아야 함
                    "<title>이솝이야기</title>" +  
                    "<author>woman</author>" +
                    "<year>2004</year>" + 
                "</book>" +
            "</bookstore>";

var parser, xmlDoc; 

parser = new DOMParser();
xmlDoc = parser.parseFromString( xmltext, "text/html" );  
// DOMParser() : parsing을 위한 객체 생성 (사용자지정함수 아님)
// xmlDoc = xml데이터로 파싱하여 문서로 담음
//xmltext : xml 데이터 담은 변수



// xml 데이터 가져와서 p태그에 출력하기
document.getElementById("demo").innerHTML
// = xmlDoc.getElementsByTagName("book")[0].childNodes[0].nodeName;    
    // nodeName = "title"이 출력
    // getElementsByTagName("태그이름")[인덱스].childNodes[인덱스].nodeName; => 해당 n번째 태그의 m번째 자식객체의 태그이름 출력
    // 결과 : TITLE
// = xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue;
    // nodeValue : 태그 안에 데이터를 가져옴 
    // nodeNames에서 한단계 더 자식 태그로 들어가야 데이터 불러올 수 있다.
    // 결과 : 탈무드
= xmlDoc.getElementsByTagName("book")[0].childNodes.length;
    // length : node의 개수(길이)를 알 수 있음
    // 배열의 인덱스를 사용하지 않고 childNodes의 property로 사용해야 함

    



</script>