Home >Backend Development >XML/RSS Tutorial >Sample code of tree structure and DOM document object model in XML (picture)
Sample code of tree structure and DOM document object model in XML (picture)
- 黄舟Original
- 2017-03-10 19:26:212084browse
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>
The following tree structure represents the above XML document: 
In the picture, there is a root element called 32c3713aa2138e0cde00114c704ab347. There is another a7c15504e26c2dc9d33fa17ec3230b5f element inside. Within the employee element, there are 5 branches, namely f2e90542b5a58058db8f193d5beb15a8, 59167353502e8b7287d6dd485f7f1057, ee8c75b84e5f6309a3ff5787a453f502, d9a1fb039fef8fc6c3cf193249481d23 and f2d2d42736253fc13ad1661a02a3d5ac. Within the f2d2d42736253fc13ad1661a02a3d5ac element, there are three sub-branches, namely 6c132ff3bb7a6c407d7ed87f2557a5a4, c29070a8b11e875ca4756dbf4d49d8f9 and d2d7d3a911f6decdbaf6e47c4f11276f.
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>
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>
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: 
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!