Front/XML, JSON

XML) JavaSCript로 데이터 파싱 및 읽기(DOMParser 활용)

pogun 2025. 2. 24. 21:38

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 → 태그 안의 텍스트 값을 가져옴.
: 즉, 첫 번째 책의 제목(탈무드)을 가져온다.