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:

<author>Author Name</author>

</book>

<title lang="en">XQuery Book</title>

<author>Author 1</author>

<author>Author 2</author>

<author>Author 3</author>

<author>Author 4</author>

</book>

</bookstore>

<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>




  
    ABC
    Author Name
    2020
    100.00
  

  
    XQuery Book
    Author 1
    Author 2
    Author 3
    Author 4
    2004
    350.00

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

x = xmlDoc.getElementsByTagName("title");

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):

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>

<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>

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;

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:

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>

<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>

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;

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:

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>

<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>

Output:

Child

Child 1

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.