DOM access
XML DOM - Accessing Nodes
Through the DOM, you can access every node in an XML document.
Try it - Example
The following example uses the XML file books.xml.
Function loadXMLDoc(), located in external JavaScript, is used to load XML files.
Use the index number in the node list to access the node
This example uses the getElementsByTagname() method to get the third <title> element in "books.xml".
Use the length attribute to traverse nodes
This example uses the length attribute to traverse all <title> elements in "books.xml".
View the node type of the element
This example uses the nodeType attribute to get the node type of the root element in "books.xml".
Traverse element nodes
This example uses the nodeType attribute to process the element nodes in "books.xml".
Use node relationships to traverse element nodes
This example uses the nodeType attribute and nextSibling attribute to process the element nodes in "books.xml".
Accessing Nodes
You can access nodes in three ways:
1. By using the getElementsByTagName() method.
2. By looping (traversing) the node tree.
3. Navigate in the node tree by leveraging node relationships.
getElementsByTagName() method
getElementsByTagName() Returns all elements with the specified tag name.
Syntax
Example
The following example returns all <title> elements under the x element:
Please note that the above The instance returns only the <title> element under the x node. To return all <title> elements in an XML document, use:
Here, xmlDoc is the document itself (document node).
DOM node list (Node List)
getElementsByTagName() method returns the node list. A node list is an array of nodes.
The following code uses loadXMLDoc() to load "books.xml" into xmlDoc, and then stores a list of <title> nodes in the variable x:
x=xmlDoc.getElementsByTagName("title");
The <title> element in x can be accessed through the index number. To access the third <title>, you would write:
Note: The index starts from 0.
In later chapters of this tutorial, you will learn more about Node List.
DOM Node List Length
The length attribute defines the length of the node list (that is, the number of nodes).
You can iterate over a list of nodes by using the length attribute:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
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>");
}
</script>
</body>
</html>Running Instance»
Click the "Run Example" button to view the online example
Explanation of the example:
Use loadXMLDoc() to load "books.xml" into xmlDoc
Get all <title> element nodes
Output the value of the text node of each <title> element
Node Types
The documentElement attribute of the XML document is the root node.
The nodeName attribute of a node is the name of the node.
The nodeType attribute of a node is the type of the node.
You will learn more about node properties in the next chapter of this tutorial.
Try it
Traverse nodes
The following code traverses the child nodes of the root node, which are also element nodes:
Example
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
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>");
}
}
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Instance explanation:
Use loadXMLDoc() to load "books.xml" into xmlDoc
Get the child nodes of the root element
Check the node type of each child node. If the node type is "1", it is an element node
If it is an element node, the name of the node is output
Navigation Node Relationships
The following code uses node relationships to navigate the node tree:
Example
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
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;
}
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
Use loadXMLDoc() to load "books.xml" into xmlDoc
Get the child node of the first book element
Set the "y" variable to the first child node of the first book element
For each child node (the first child node starts from "y"), check the node type, if the node type is "1", it is an element node
If it is an element node, output the name of the node
Set the "y" variable to the next sibling node and run the loop again
