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