The Document interface represents the entire XML document. The document interface has attributes and methods to modify the document information. The Document node can have element, PI, comment, DocumentType as children. The node name is #document. The nodeType value is 9.

The document Object is root of the document tree. It contains element nodes, text nodes, comments, PI’s. Document interface has methods to create these objects like createAttribute(), createAttributeNS(),createCDATASection(), createComment(), createElement(), createElementNS() ,createEntityReference(), createTextNode().

 In addition to these, following methods and properties are defined in document Object:

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 method

documentObject.firstChild

lastChild

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

Syntax for lastChild property

documentObject.lastChild

nodeName

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

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

getElementById()

The getElementById() method returns the element that has ‘id’ as attribute. If no such element exists, it returns null

Syntax for getElementById() method

documentObject.getElementById(id);

importNode()

The importNode() method is used to import nodes from other XML Documents. This method returns the imported node.

Syntax for importNode() method

importNode(Node nodetoimport, boolean deep)

Where,

  • nodetoimport is the node to be imported.
  • deep is Boolean when it is set to true, it imports all children of the specified node. If set to false, it imports only the node itself.

getElementsByTagNameNS()

The getElementsByTagNameNS() method returns a list of nodes of all elements with the specified name and namespace.

Syntax for getElementsByTagNameNS() method

documentObject.getElementsByTagNameNS(ns,name)

Where,

  • ns string specifies the namespace name to search for. The value "*" is used to match all tags.
  • name string specifies the tagname to search for. The value "*" is used to match all tags.

Example of getElementsByTagNameNS() method

<!DOCTYPE html>

<html>

   <body>

      <h1>document interface </h1>     

      <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("myData.xml");

            xd = xmlDoc.documentElement;

           

            document.write("NodeName : " + xd.nodeName);

            document.write("NodeValue : " + xd.childNodes[0].nodeValue + "<br/>");

            d =xmlDoc.getElementsByTagName("data");

            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 + "<br/>");

                        }

                  }

            }                

      </script>

   </body>

</html>

Output:

Document interface

NodeName : rootNodeValue : 
NodeName : animal NodeType : 1 NodeValue : Lion
NodeName : habitat NodeType : 1 NodeValue : jungle
NodeName : type NodeType : 1 NodeValue : mammal
NodeName : eatingHabit NodeType : 1 NodeValue : Carnivore
NodeName : animal NodeType : 1 NodeValue : Deer
NodeName : habitat NodeType : 1 NodeValue : jungle
NodeName : type NodeType : 1 NodeValue : mammal
NodeName : eatingHabit NodeType : 1 NodeValue : Herbivore

 

›› go to examples ››