XML DOM Node List

The XML DOM uses a tree-structure, also known as a node-tree, to view an XML document, i.e., each node can be accessed through the tree. We can also modify, delete, or create a new element through the tree. The getElementsByTagName() method and the childNodes property returns a list of nodes.

DOM Node List:

The childNodes or getElementsByTagName() properties or methods is used to return a node list object. A list of nodes is represented by the node list object in the same order as in the XML. The index numbers starting from 0 are used to access the nodes in a node list.

Books.xml:

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
 
  <book category="Child">
    <title lang="en">ABC</title>
    <author>Author Name</author>
    <year>2020</year>
    <price>100.00</price>
  </book>
 
  <book category="IT">
    <title lang="en">XQuery Book</title>
    <author>Author 1</author>
    <author>Author 2</author>
    <author>Author 3</author>
    <author>Author 4</author>
    <year>2004</year>
    <price>350.00</price>
  </book>
 
</bookstore>

Example: To return a node list of title elements in “books.xml” which is loaded into the variable xmlDoc:

x = xmlDoc.getElementsByTagName("title");

Explanation:

Here, x becomes a node list object, after the execution of the above code.

Example: To return the text from the first <title> element in the node list (x):

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("title");
    document.getElementById("hello").innerHTML =
    x[0].childNodes[0].nodeValue;
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, the value of the “txt” variable becomes “ABC”, after the execution of the above code.

Node List Length:

By keeping itself up-to-date, a node list object automatically updates the list, if an element is deleted or added. The number of nodes in a list represents the length property of a node list. For looping through each element in a list, the length of the node list can be used.

Example: To return the number of <title> elements in “books.xml”:

x = xmlDoc.getElementsByTagName('title').length;

Explanation:

Here, the value of x will be 2, after the execution of the above code.

Example: Using the length property to loop through the list of <title> elements:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, i, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName('title');
    for (i = 0 ; i <x.length; i++) {
        txt += x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("hello").innerHTML = txt;
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are loading the “books.xml” into xmlDoc. To hold a node list of all title elements, we will set the x variable. The text node values can be collected from the <title> elements.

DOM Attribute List (Named Node Map):

To get a list of the attribute nodes, the attributes property of the element node is used, also called a named node map. It is similar to a node list. However, there are some differences in methods and properties. By keeping itself up-to-date, an attribute list automatically updates the list, if an attribute is deleted or added.

Example: To get a list of attribute nodes from the first <book> element in “books.xml”:

x = xmlDoc.getElementsByTagName('book')[0].attributes;

Explanation:

In the above example, x.length represents the number of attributes, after the execution of the code. Also, to return an attribute node, the x.getNamedItem() can be used.

Example: To get the value of the “category” attribute, and the number of attributes of a book:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, txt, xmlDoc;
    xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("book")[0].attributes;
    txt = x.getNamedItem("category").nodeValue + "<br>" + x.length;
    document.getElementById("hello").innerHTML = txt;
}
</script>
</body>
</html>

Output:

Child
1

Explanation:

In the above example, the “books.xml” is loaded into xmlDoc. Now, to hold a list of all attributes of the first <book> element, we will set the x variable. The value of the “category” attribute and the length of the attribute list can then be retrieved.

Please Share