DOM 문서는 계층 구조로 구성된 노드 혹은 정보의 모음입니다. 개발자는 이 계층구조를 따라 특정 정보를 검색할 수 있습니다. 계층 구조로 이루어졌기 때문에 트리 구조라고도 부릅니다.
한편, XML DOM은 개발자가 응용 프로그램을 만들기 위해 언제든지 트리의 노드를 추가, 편집, 이동 또는 제거 할 수있는 API도 제공합니다.
Example
다음 예제 (sample.htm)는 XML 문서 ( "address.xml")를 XML DOM 객체로 파싱한 다음 JavaScript를 사용하여 XML 문서에서 정보를 추출합니다.
<!DOCTYPE html>
<html>
<body>
<h1>TutorialsPoint DOM example </h1>
<div>
<b>Name:</b> <span id="name"></span><br>
<b>Company:</b> <span id="company"></span><br>
<b>Phone:</b> <span id="phone"></span>
</div>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/xml/address.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("company").innerHTML=
xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
| cs |
address.xml은 아래와 같습니다.
<?xml version="1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
| cs |
이제 이 두 파일, sample.htm과 address.xml을 같은 디렉토리 /xml에 두고 브라우저에서 열어서 sample.htm 파일을 실행하겠습니다. 이렇게 하면 다음과 같이 출력됩니다.
댓글 없음:
댓글 쓰기