DOM or Document Object Model is a model where all the contents of an XML document are approached as objects. Each object is treated as a node. The nodes can be traversed and manipulated using the DOM interface properties. The useful properties are:

childNodes

The childNodes property returns a list of child nodes for the document.

Syntax for childNodes property

documentObject.childNodes;

firstChild

The firstChild property returns the first child node of the document.

Syntax for firstChild property

documentObject.firstChild;

lastChild

The lastChild property returns the last child node of the document.

Syntax for lastChild property

documentObject.lastChild;

parentNode

The parentNode property returns the parent node of the current element. If there is no parent node, it returns null.

Syntax for parentNode property

documentObject.parentNode;

attributes

The attributes property returns NamedNodeMap of attribute objects. This is a read-only attribute.

Syntax for attributes property

documentObject.attributes;

previousSibling

The previousSibling property returns the previous sibling of the current node. The previous sibling has same parent as current node. The previous sibling can be text, comment or any node. If the current node is first child, null is returned.

Syntax for previousSibling property

documentObject.previousSibling;

nextSibling

The nextSibling property returns the next sibling of the current node. The next sibling has same parent as current node and can be text, comment or any node. If the current node is last child, null is returned.

Syntax for nextSibling property

documentObject.nextSibling;

namespaceURI

The namespaceURI property returns the namespace associate with the element. If there is no namespace null is returned.

Syntax for namespaceURI property

documentObject.namespaceURI;

nodeName

The nodeName property returns the name of a node, such as, #document, #document fragment, #comment, #text, etc...

Syntax for nodeName property

documentObject.nodeName;

nodeType

The nodeType property returns the node type of a node, such as, ELEMENT_NODE=1, ATTRIBUTE_NODE=2 and so on.

Syntax for nodeType property

documentObject.nodeType;

nodeValue

The nodeValue property sets or returns the value of a node.

Syntax for nodeValue property

documentObject.nodeValue;

Example of XML DOM properties

The example below shows usage of some of the properties explained above.

element.xml

<?xml version='1.0'?>

<root>

    <data>

        <animal>Lion</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Carnivore</eatingHabit>

    </data>     

      <data>

        <animal>Deer</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Herbivore</eatingHabit>

    </data>

</root>

element.html

<!DOCTYPE html>

<html>

      <body>

            <script>

            function loadFile(name){

                   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",name,false);

                  xmlhttp.send();

                  return xmlhttp.responseXML;

 

            }

           

            xmlDoc = loadFile("element.xml");        

            c = xmlDoc.firstChild;

            if(c.nodeType != 1){

                  while(c.nodeType!=1){

                        c = c.nextSibling;           

                  }

                  document.write(" FirstChild: " + c.nodeName);

            }

            else{

                  document.write(" FirstChild: " + c.nodeName);

            }

           

            c = xmlDoc.getElementsByTagName("animal")[0];

            document.write("<br/> parentNode: " + c.parentNode.nodeName + " value: " + c.parentNode.nodeValue);

           

            document.write("<br/> node name: " + c.nodeName + " value: " + c.childNodes[0].nodeValue);

           

            c = c.nextSibling;

           

            if(c.nodeType != 1){

                  while(c.nodeType!=1){

                        c = c.nextSibling;           

                  }

                  document.write("<br/> nextSibling node name: " + c.nodeName + " value: " + c.childNodes[0].nodeValue);

            }

            else{

                  document.write("<br/> nextSibling node name: " + c.nodeName + " value: " + c.childNodes[0].nodeValue);

            }

           

            document.write("<br/> namespaceURI: " + c.namespaceURI);

           

            c = xmlDoc.lastChild;

            document.write("<br/> LastChild: " + c.nodeName);

           

           

/*          d = xmlDoc.getElementsByTagName("root").childNodes;

            for(j=0; j<d.length; j++){

                  c = d[j].childNodes;

                 

                  for(i=0; i< c.length; i++){

                        if(c[i].nodeType != 3){

                              document.write("NodeName : " + c[i].nodeName);

                              document.write(" NodeType : " + c[i].nodeType);

                              document.write(" NodeValue : " + c[i].childNodes[0].nodeValue);

                              document.write(" Namespace : " + c[i].namespaceURI  + "<br/>");

                        }

                  }

            } */                 

      </script>

      </body>

</html>

Output of the example above:

FirstChild: root
parentNode: data value: null
node name: animal value: Lion
nextSibling node name: habitat value: jungle
namespaceURI: null
LastChild: root

 

›› go to examples ››