...
XML DOM
XML DOM은 XML 문서에 접근하여, 해당 문서를 조작할 수 있는 표준화된 방법을 정의합니다.
모든 XML 요소는 XML DOM을 통해 접근할 수 있습니다.
XML DOM은 XML 문서 내의 모든 요소의 객체, 속성 그리고 메소드를 정의합니다.
이러한 XML DOM은 플랫폼이나 프로그래밍 언어에 상관없이 언제나 사용할 수 있습니다.
선행으로 JS의 DOM문법을 익히시면 손쉽게 익히실수 있습니다. 문법이 거의 똑같습니다.
XML 파서(parser)
현재 대부분의 주요 웹 브라우저는 XML 문서에 접근하고 조작하기 위한 XML 파서를 별도로 내장하고 있습니다.
XML DOM은 XML 문서에 접근하고 조작할 수 있는 다양한 메소드를 포함하고 있습니다.
하지만 이러한 메소드를 이용하려면 우선 XML 문서를 XML DOM 객체로 변환해야만 합니다.
XML 파서(parser)는 XML 문서의 평문(plain text) 데이터를 읽어 들여, 그것을 XML DOM 객체로 반환해 줍니다.
문자열 파싱(parsing)
다음 예제는 XML 문서의 문자열을 추출하여 XML DOM 객체로 파싱하고, 해당 객체에서 정보를 추출하는 예제입니다.
const text =
'<language>' +
'<name>HTML</name>' +
'<category>web</category>' +
'<priority>high</priority>' +
"<standard version='5.1'>W3C</standard>" +
'</language>';
let xmlParser = new DOMParser(); //DOM파서 객체를 생성
let xmlDoc = xmlParser.parseFromString(text, "text/xml"); // parseFromString() 메소드를 이용해 문자열을 파싱함.
let value = xmlDoc.getElementsByTagName("name")[0].textContent; console.log(value); // HTML
xml 다루기
다음 예제는 XML 문서의 문자열을 추출하여 XML DOM 객체로 파싱하고, 해당 객체에서 정보를 추출하는 예제입니다.
<?xml version="1.0" encoding="UTF-8"?>
<shop city="서울" type="마트">
<food>
<name>귤</name>
<sort>과일</sort>
<cost>3000</cost>
</food>
<food>
<name>상추</name>
<sort>야채</sort>
<cost>2000</cost>
</food>
<name>홍길동</name>
</shop>
(async () => {
let response = await fetch("./1.xml");
let t_xml = await response.text(); // 텍스트 형태로 가져오고
console.log(t_xml);
// 자바스크립트로 다루기위해, 파서를 통해 텍스트를 xml문서로 변환한다.
let parseXML = new DOMParser();
let xmlDoc = parseXML.parseFromString(t_xml, "text/xml");
})();
보시듯이, DOM트리를 텍스트 형태로 가져왔습니다.
우리가 일반적으로 HTML DOM값을 가져오듯이 똑같은 문법을 통해 xml태그 데이터들을 가져오면 됩니다.
다음은 food태그내의 모든 문자들을 가져오는 예제 입니다. ["귤", "과일", "3000", "상추", "야채", "2000"]
for문 혹은 forEach 문으로 가져올 수 있습니다. 두 방법중 편한 방법을 이용하시면 됩니다.
let arr = new Array();
let food = xmlDoc.getElementsByTagName("food"); // food태그들을 모두 가져와 배열로 저장
for(let food_node of food){ // 가져온 food태그들을 순회
for(let child_node of food_node.children) { // food태그안에 또 여러가지 태그가 있으니 또 순회
arr.push(child_node.textContent);
}
}
console.log(arr); // ["귤", "과일", "3000", "상추", "야채", "2000"]
let arr = new Array();
let food = xmlDoc.querySelectorAll("food");
food.forEach(value => {
value.childNodes.forEach(value2 => {
if(value2.nodeType === 1){
arr.push(value2.textContent);
}
})
})
console.log(arr); // ["귤", "과일", "3000", "상추", "야채", "2000"]
특정 노드만 골라 가져오기
xml데이터에는 3개의 <name>이 있습니다.
- 귤, 상추, 홍길동
이중에 음식 name만 가져와보려고 합니다.
name자식 노드는 부모 노드 food에 속해있으니까, querySelector을 통해 "food"의 "name"으로 구분해서 가져오면 됩니다.
//name만 가져오기
let name = xmlDoc.querySelectorAll("food name");
name.forEach(value => {
console.log(value);
})
# 참고자료
http://www.tcpschool.com/xml/intro
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.