XML DOM Access Nodes

Through DOM, you can access each node in the XML document.

Example

The following example uses an XML file books.xml.

Function loadXMLDoc(), located in external JavaScript, used to load XML files.

Access nodes using the index number in the node list
In this example, the getElementsByTagname() method is used to obtain the third <title> element in "books.xml".
Use the length property to loop through nodes
In this example, the length property is used to loop through all <title> elements in "books.xml".
View the node type of an element
In this example, the nodeType property is used to obtain the node type of the root element in "books.xml".
Loop through element nodes
In this example, the nodeType property is used to handle element nodes in "books.xml".
Loop through element nodes using node relationships
In this example, the nodeType property and nextSibling property are used to handle element nodes in "books.xml".

Accessing Nodes

You can access nodes in three ways:

  1. Use the getElementsByTagName() method
  2. Navigate through the node tree by looping (traversing) the node tree
  3. Navigate through the node tree by utilizing the relationships between nodes

getElementsByTagName() method

The getElementsByTagName() method returns all elements with the specified tag name.

syntax

node.getElementsByTagName("tagname");

Example

The following example returns all <title> elements under the x element:

x.getElementsByTagName("title");

Note that the example above only returns <title> elements under the x node. To return all <title> elements in the XML document, use:

xmlDoc.getElementsByTagName("title");

Here, xmlDoc is the document itself (document node).

DOM Node List

getElementsByTagName() method returns a node list (node list). A node list is an array of nodes.

The following code uses loadXMLDoc() Set "books.xml"Load xmlDoc into, then store a list of <title> nodes in the variable x:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");

You can access the <title> elements in x by index. To access the third <title>, you can write:

y=x[2];

Try It Yourself (TIY)

Note:The index starts at 0.

In later sections of this tutorial, you will learn more about Node Lists.

DOM Node List Length

The length property defines the length of the node list (i.e., the number of nodes).

You can loop through a node list by using the length property:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
  { 
  document.write(x[i].childNodes[0].nodeValue);
  document.write("<br />");
  }

Example explanation:

  1. Use loadXMLDoc() Set "books.xml"Load xmlDoc
  2. Get all <title> element nodes
  3. Output the value of the text node of each <title> element

Try It Yourself (TIY)

Node Type

XML document's documentElement Attribute is the root node.

Attribute of the node is nodeName Attribute is the name of the node.

Attribute of the node is nodeType Attributes are the type of nodes.

You will learn more about node attributes in the next section of this tutorial.

Try It Yourself (TIY)

Traverse the node

The following code loops through the child nodes of the root node, which are also element nodes:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{ 
  if (x[i].nodeType==1)
  {//Process only element nodes (type 1) 
  document.write(x[i].nodeName);
  document.write("<br />");
  } 
}

Example explanation:

  1. By using loadXMLDoc() Set "books.xml"Load xmlDoc"
  2. Get the child nodes of the root element
  3. Check the node type of each child node. If the node type is "1", it is an element node
  4. If it is an element node, then output the name of the node

Try It Yourself (TIY)

Navigating through the relationship of nodes

The following code navigates through the node tree by utilizing the relationship between nodes:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i<x.length;i++)
{
if (y.nodeType==1)
  {//Process only element nodes (type 1)
  document.write(y.nodeName + "<br />");
  }
y=y.nextSibling;
}
  1. By using loadXMLDoc() Set "books.xml"Load xmlDoc"
  2. Get the first child of the first 'book' element
  3. Set the 'y' variable to the first child of the first 'book' element
  4. Check the node type of each child node, if the node type is '1', it is an element node
  5. If it is an element node, then output the name of the node
  6. Set the 'y' variable to the next sibling node and run the loop again

Try It Yourself (TIY)