XML DOM ADVANCED

Click Here

Given the following XML, messages.xml

<?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="message.css"?> <messages>     <message type="mail">         <from>James</from>         <to>Peter</to>         <title>Meeting</title>         <text>Remember our meeting</text>     </message>     <message type="sms">         <from>John</from>         <to>Smith</to>         <title>Report</title>         <text>Create sales report</text>     </message> </messages>

To display the first value of the previous XML tag <text>

txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

This could be the website to view

<html> <body> <script type="text/javascript"> if (window.XMLHttpRequest) {     xmlhttp=new XMLHttpRequest(); } else {     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; document.write(txt); </script> </body> </html>

To display the value of the attribute "type" of the first "message" of XML

txt=xmlDoc.getElementsByTagName("message")[0].getAttribute("type");

The result will be "mail"

Note that the search index starts with 0.

If we wanted to display the value of attribute "type" of the second element "message".

For the second element, the search index will be 1.

txt=xmlDoc.getElementsByTagName("message")[1].getAttribute("type");

To change the value of an XML element instead of "<title> Meeting </title>" we put "<title> See you </title>".

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="See you";

To create a new attribute

x=xmlDoc.getElementsByTagName("message"); for(i=0;i<x.length;i++) {   x[i].setAttribute("format","text"); }

Now the XML would look like

<?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="message.css"?> <messages>     <message type="mail" format="text">         <from>James</from>         <to>Peter</to>         <title>Meeting</title>         <text>Remember our meeting</text>     </message>     <message type="sms" format="text">         <from>John</from>         <to>Smith</to>         <title>Report</title>         <text>Create sales report</text>     </message> </messages>

To create a new element in the XML

elementnode=xmlDoc.createElement("format"); textnode=xmlDoc.createTextNode("text"); elementnode.appendChild(textnode);
x=xmlDoc.getElementsByTagName("message"); x[0].appendChild(elementnode); x[1].appendChild(elementnode);

Explanation of the code is as follows:
1. - Create the element node
2. - Create text node type
3. - Add the node type text element node
4. - We the parent element
5. - Add the new element node to its parent element.

The XML looks like this:

<?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="message.css"?> <messages>     <message type="mail">
        <from>James</from>         <to>Peter</to>         <title>Meeting</title>         <text>Remember our meeting</text>         <format>text</format>     </message>         <message type="sms">         <from>John</from>         <to>Smith</to>         <title>Report</title>         <text>Create sales report</text>         <format>text</format>     </message> </messages>

If we delete the first message tag <format>

x=xmlDoc.getElementsByTagName("message")[0]; x.removeChild(x.childNodes[0]);

If we want to also delete the second

x.removeChild(x.childNodes[1]);

Click Here