>  기사  >  백엔드 개발  >  XML의 트리 구조 및 DOM 문서 개체 모델의 샘플 코드(그림)

XML의 트리 구조 및 DOM 문서 개체 모델의 샘플 코드(그림)

黄舟
黄舟원래의
2017-03-10 19:26:211963검색

이 글에서는 주로 XML의 트리 구조와 DOM 객체 모델을 소개합니다. 이 글에서는 DOM 객체를 분석하는 JavaScript의 예를 제공합니다. 필요한 친구는

트리 구조
XML 문서는 항상 설명적입니다. 종종 XML 트리라고 불리는 트리 구조는 XML 문서를 설명하는 데 중요한 역할을 합니다.

이 트리 구조에는 루트(상위) 요소, 하위 요소 등이 포함됩니다. 트리 구조를 사용하면 루트 요소에서 발생하는 모든 후속 분기와 하위 분기를 이해할 수 있습니다. 구문 분석은 루트 요소에서 시작된 다음 요소를 가리키는 첫 번째 분기로 이동하고, 여기에서 첫 번째 분기와 해당 하위 요소가 처리됩니다.

다음 예는 간단한 XML 트리 구조를 보여줍니다.

<?xml version="1.0"?>  
<Company>  
    <Employee>  
        <FirstName>Tanmay</FirstName>  
        <LastName>Patil</LastName>  
        <ContactNo>1234567890</ContactNo>  
        <Email>tanmaypatil@xyz.com</Email>  
        <Address>  
            <City>Bangalore</City>  
            <State>Karnataka</State>  
            <Zip>560212</Zip>  
        </Address>  
    </Employee>  
</Company>

다음 트리 구조는 위의 XML 문서를 나타냅니다.


XML의 트리 구조 및 DOM 문서 개체 모델의 샘플 코드(그림)

사진에는 32c3713aa2138e0cde00114c704ab347라는 루트 요소가 있습니다. 내부에는 또 다른 a7c15504e26c2dc9d33fa17ec3230b5f 요소가 있습니다. 직원 요소에는 f2e90542b5a58058db8f193d5beb15a8, 59167353502e8b7287d6dd485f7f1057, ee8c75b84e5f6309a3ff5787a453f502, d9a1fb039fef8fc6c3cf193249481d23 및 f2d2d42736253fc13ad1661a02a3d5ac라는 5개의 분기가 있습니다. f2d2d42736253fc13ad1661a02a3d5ac 요소에는 6c132ff3bb7a6c407d7ed87f2557a5a4, d2d7d3a911f6decdbaf6e47c4f11276f라는 세 개의 하위 분기가 있습니다.

DOM 문서 개체 모델
DOM(문서 개체 모델)은 XML의 기초입니다. XML 문서에는 노드라고 하는 정보의 계층적 단위가 있습니다. DOM은 이러한 노드와 노드 간의 관계를 설명하는 방법입니다.

DOM 문서는 계층 구조로 구성된 노드 또는 정보 블록의 모음입니다. 이 계층 구조를 통해 개발자는 이 노드 트리를 탐색하여 특정 정보를 쿼리할 수 있습니다. DOM은 정보 계층 구조를 기반으로 하기 때문에 노드 트리 기반으로도 간주됩니다.

한편, XML DOM은 개발자가 애플리케이션을 생성하기 위해 노드 트리의 어느 위치에서든 노드를 추가, 편집, 이동 또는 제거할 수 있는 API도 제공합니다.

샘플

다음 샘플(sample.htm)은 XML 문서("address.xml")를 XML DOM 객체로 구문 분석한 후 JavaScript를 사용하여 일부 정보를 추출합니다.

<!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>

address.xml의 내용은 다음과 같습니다.

<?xml version="1.0"?>  
<contact-info>  
    <name>Tanmay Patil</name>  
    <company>TutorialsPoint</company>  
    <phone>(011) 123-4567</phone>  
</contact-info>

sample.htm과 address.xml 두 파일을 동일한 디렉토리/xml에 저장한 후 실행합니다. 브라우저에서 샘플.htm 파일을 엽니다. 다음과 같은 결과가 생성되어야 합니다.


XML의 트리 구조 및 DOM 문서 개체 모델의 샘플 코드(그림)

여기서 각 하위 노드를 추출하고 해당 값을 표시한 것을 볼 수 있습니다.


위 내용은 XML의 트리 구조 및 DOM 문서 개체 모델의 샘플 코드(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.