Sample code of tree structure and DOM document object model in XML (picture)-XML/RSS Tutorial-php.cn

Sample code of tree structure and DOM document object model in XML (picture)

黄舟

Release： 2017-03-10 19:26:21

Original

2088 people have browsed it

This article mainly introduces the tree structure and DOM document object model in XML. The article gives an example of JavaScript parsing DOM objects. Friends in need can refer to the following

Tree structure
XML documents are always descriptive. Tree structures, often called XML trees, play an important role in describing XML documents.

This tree structure contains root (parent) elements, child elements, etc. By using a tree structure, we can understand all subsequent branches and sub-branches originating from the root element. Parsing starts at the root element and then moves down to the first branch pointing to an element, from where the first branch and its children are processed.

Example
The following example demonstrates a simple XML tree structure:

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

Copy after login

The following tree structure represents the above XML document:
Sample code of tree structure and DOM document object model in XML (picture)

In the picture, there is a root element called . There is another element inside. Within the employee element, there are 5 branches, namely , , , and

. Within the

element, there are three sub-branches, namely , and .

DOM Document Object Model
The Document Object Model (DOM) is the basis of XML. XML documents have a hierarchical unit of information called a node; the DOM is a way of describing these nodes and the relationships between them.

A DOM document is a collection of nodes or blocks of information organized in a hierarchical structure. This hierarchy allows developers to navigate this node tree to query specific information. Because it is based on an information hierarchy, the DOM is also considered node-tree-based.

On the other hand, XML DOM also provides an API that allows developers to add, edit, move or remove nodes anywhere in the node tree in order to create applications.

Sample
The following example (sample.htm) parses an XML document ("address.xml") into an XML DOM object and then extracts some information using 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>

Copy after login

The content of address.xml is as follows:

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

Copy after login

We can save these two files sample.htm and address.xml to the same directory/xml, Then execute the sample.htm file by opening it in a browser. It should produce a result like this:
Sample code of tree structure and DOM document object model in XML (picture)

Here, you can see that we extracted each child node and displayed their value.

The above is the detailed content of Sample code of tree structure and DOM document object model in XML (picture). For more information, please follow other related articles on the PHP Chinese website!