XML의 트리 구조 및 DOM 문서 개체 모델의 샘플 코드(그림)-XML/RSS 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-03-10 19:26:21

원래의

2030명이 탐색했습니다.

이 글에서는 주로 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 문서 개체 모델의 샘플 코드(그림)

사진에는 라는 루트 요소가 있습니다. 내부에는 또 다른 요소가 있습니다. 직원 요소에는 , , , 및

라는 5개의 분기가 있습니다.

요소에는 , 라는 세 개의 하위 분기가 있습니다.

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 문서 개체 모델의 샘플 코드(그림)