Daily coding
XML : 데이터 parsing 하기 본문
* 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>
'Front-end > 비동기통신' 카테고리의 다른 글
JSON : 데이터 불러오기 / 데이터 처리하기 (0) | 2020.01.16 |
---|---|
JSON : 기본 개념 및 사용법 (0) | 2020.01.16 |
XML : xml 파일 및 url 데이터 불러오기 및 parsing (0) | 2020.01.16 |
XML : 파일 읽어오기 (0) | 2020.01.15 |
XML : 개념정리 (0) | 2020.01.15 |