1. XML 데이터란?
: XML(eXtensible Markup Language)은 데이터를 구조화하여 저장하고 전달하는 포맷이다.
: 예를 들어, 도서 정보를 XML로 저장하면 다음과 같다.
<bookstore>
<book>
<title>탈무드</title>
<author>man</author>
<year>2012/03/14</year>
</book>
<book>
<title>이솝이야기</title>
<author>woman</author>
<year>2015/02/18</year>
</book>
</bookstore>
: 여기서 <bookstore>는 루트 요소이고, 각 <book> 태그 안에 <title>, <author>, <year> 등의 정보가 포함된다.
2. JavaScript에서 XML 데이터 파싱
: JavaScript에서 XML을 다루려면 DOMParser를 사용하여 XML 문자열을 파싱해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XML 파싱 예제</title>
</head>
<body>
<p id="demo"></p>
<script>
// XML 데이터를 문자열로 정의
let xmlString = `
<bookstore>
<book>
<title>탈무드</title>
<author>man</author>
<year>2012/03/14</year>
</book>
<book>
<title>이솝이야기</title>
<author>woman</author>
<year>2015/02/18</year>
</book>
</bookstore>`;
// 1. DOMParser를 사용하여 XML을 파싱
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString, "text/xml");
// 2. 첫 번째 책의 제목 가져오기
let firstTitle = xmlDoc.getElementsByTagName("title")[0].textContent;
// 3. 결과 출력
document.getElementById("demo").innerHTML = "첫 번째 책 제목: " + firstTitle;
// 출력 결과
첫 번째 책 제목: 탈무드
</script>
</body>
</html>
3. 코드 설명
3-1. XML 데이터를 문자열로 저장
let xmlString = `<bookstore> ... </bookstore>`;
: XML 데이터를 문자열(string) 형태로 저장한다.
: HTML처럼 태그로 이루어진 구조지만 문자열이기 때문에 직접 사용할 수 없음.
3-2. DOMParser를 사용하여 XML 파싱
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString, "text/xml");
: DOMParser() 객체를 생성한 후,
: parseFromString(xmlString, "text/xml")을 사용하여 XML 형식으로 변환한다.
3-3. 특정 태그 값 가져오기
let firstTitle = xmlDoc.getElementsByTagName("title")[0].textContent;
: getElementsByTagName("title") → <title> 태그를 모두 가져옴.
: [0] → 첫 번째 <title> 요소 선택.
: .textContent → 태그 안의 텍스트 값을 가져옴.
: 즉, 첫 번째 책의 제목(탈무드)을 가져온다.
'Front > XML, JSON' 카테고리의 다른 글
JSON) 데이터 요청 및 처리 방법 / XML과 JSON 차이점 (0) | 2025.02.25 |
---|---|
JSON) 개념부터 변환까지 이해하기 (0) | 2025.02.24 |
XML) 데이터를 JavaScript로 파싱하여 처리하는 방법 (0) | 2025.02.24 |
비동기 통신(AJAX) 활용법 : XMLHttpRequest / fetch() (0) | 2025.02.24 |
XML) 개념 및 특징 (0) | 2025.02.24 |