XML DOM 튜토리얼
XML DOM
DOM이란 무엇입니까?
DOM은 문서에 액세스하고 조작하기 위한 표준을 정의합니다.
HTML DOM은 HTML 문서에 액세스하고 조작하는 표준 방법을 정의합니다. HTML 문서를 트리 구조로 표시합니다.
XML DOM은 XML 문서에 액세스하고 조작하는 표준 방법을 정의합니다. XML 문서를 트리 구조로 나타냅니다.
DOM을 이해하는 것은 HTML이나 XML로 작업하는 모든 사람에게 필수입니다.
HTML DOM
모든 HTML 요소는 HTML DOM을 통해 액세스할 수 있습니다.
이 예는 id="demo"인 HTML 요소의 값을 변경합니다.
예시
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
이 예는 HTML 문서에서 첫 번째 <h1> 요소의 값을 변경합니다.
예시
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
참고: HTML 문서에 <h1> 요소가 하나만 포함된 경우에도 getElementsByTagName() 메서드가 항상 배열을 반환하기 때문에 배열 인덱스 [0]을 지정해야 합니다.
JavaScript 튜토리얼 에서 HTML DOM에 대해 더 많이 배울 수 있습니다 .
XML DOM
모든 XML 요소는 XML DOM을 통해 액세스할 수 있습니다.
XML DOM은 다음과 같습니다.
- XML을 위한 표준 개체 모델
- XML을 위한 표준 프로그래밍 인터페이스
- 플랫폼 및 언어 독립적
- W3C 표준
즉 , XML DOM은 XML 요소를 가져오고, 변경하고, 추가하거나 삭제하는 방법에 대한 표준입니다.
XML 요소의 값 가져오기
이 코드는 XML 문서에서 첫 번째 <title> 요소의 텍스트 값을 검색합니다.
예시
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
XML 파일 로드
아래 예제에 사용된 XML 파일은 books.xml 입니다.
이 예는 "books.xml"을 xmlDoc으로 읽고 books.xml에서 첫 번째 <title> 요소의 텍스트 값을 검색합니다.
예시
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
예시 설명
- xmlDoc - 파서에 의해 생성된 XML DOM 객체.
- getElementsByTagName("title")[0] - 첫 번째 <title> 요소 가져오기
- childNodes[0] - <title> 요소의 첫 번째 자식(텍스트 노드)
- nodeValue - 노드의 값(텍스트 자체)
XML 문자열 로드
이 예에서는 텍스트 문자열을 XML DOM 개체에 로드하고 JavaScript로 정보를 추출합니다.
예시
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
프로그래밍 인터페이스
DOM은 XML을 노드 개체 집합으로 모델링합니다. 노드는 JavaScript 또는 기타 프로그래밍 언어로 액세스할 수 있습니다. 이 튜토리얼에서는 JavaScript를 사용합니다.
DOM에 대한 프로그래밍 인터페이스는 설정된 표준 속성 및 메서드에 의해 정의됩니다.
속성 은 흔히 있는 것(즉, 노드 이름은 "책")이라고 합니다.
메소드 는 종종 완료된 것으로 언급됩니다(예: "책" 삭제).
XML DOM 속성
다음은 몇 가지 일반적인 DOM 속성입니다.
- x.nodeName - x의 이름
- x.nodeValue - x의 값
- x.parentNode - x의 부모 노드
- x.childNodes - x의 자식 노드
- x.attributes - x의 속성 노드
참고: 위 목록에서 x는 노드 개체입니다.
XML DOM 메서드
- x.getElementsByTagName( name ) - 지정된 태그 이름을 가진 모든 요소 가져오기
- x.appendChild( node ) - x에 자식 노드를 삽입합니다.
- x.removeChild( node ) - x에서 자식 노드를 제거합니다.
참고: 위 목록에서 x는 노드 개체입니다.