XML DOM Node List

The node list is returned by the getElementsByTagName() method and the childNodes property.

Instance

The following example uses an XML file books.xml.

Function loadXMLDoc()It is located in external JavaScript and is used to load XML files.

Get text from the first <title> element
This example uses the getElementsByTagName() method to get text from the first <title> element in "books.xml".
Loop through nodes by using the length property
This example uses a node list and the length property to loop through all <title> elements in "books.xml".
Get the attributes of an element
This example uses an attribute list to get attributes from the first <title> element in "books.xml".

DOM Node List

When using properties or methods like childNodes or getElementsByTagName(), a NodeList object is returned.

The NodeList object represents a list of nodes in the same order as in XML.

Use the index starting from 0 to access nodes in the node list.

The following image represents "books.xml"A node list of <title> elements in "

DOM node list

The following code snippet uses loadXMLDoc() Load "books.xml" into xmlDoc and return "books.xml"A node list of a title element:

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

After the above statement is executed, x becomes a NodeList object.

The following code snippet returns the text from the first <title> element in the node list x:

txt=x[0].childNodes[0].nodeValue;

After the above statement is executed, txt = "Everyday Italian".

Try It Yourself (TIY)

Node List Length

The NodeList object maintains its own updates. If elements are deleted or added, the list will automatically update.

The length property of the node list is the number of nodes in the list.

The following code snippet uses loadXMLDoc() Set "books.xml"Load xmlDoc, and return the number of <title> elements in "books.xml":

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

After the above statement is executed, x = 4.

The length of the node list can be used to loop through all elements in the list.

The following code snippet uses the length property to iterate through the list of <title> elements:

xmlDoc=loadXMLDoc("books.xml");
//the x variable will hold a node list
x=xmlDoc.getElementsByTagName('title');
for (i=0;i<x.length;i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}

Output:

Harry Potter
Everyday Italian
XQuery Kick Start
Learning XML

Example Explanation:

  • By using loadXMLDoc() Set "books.xml"Load xmlDoc
  • Set the x variable to save the node list of all title elements
  • Output the value from the text nodes of all <title> elements

Try It Yourself (TIY)

DOM Attribute List (Named Node Map)

The attributes property of an element node returns a list of attribute nodes.

This is called Named Node Map, similar to the node list except for some differences in methods and properties.

The attribute list maintains its own updates. If attributes are deleted or added, the list will automatically update.

The following code snippet uses loadXMLDoc() Load "books.xml" into xmlDoc and from "books.xmlThe first <book> element within the "" returns a list of attribute nodes:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book')[0].attributes;

After the above code is executed, x.length is equal to the number of attributes, and x.getNamedItem() can be used to return the attribute node.

The following code snippet returns the value of the "category" attribute of a book and the number of its attributes:

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0].attributes;
document.write(x.getNamedItem("category").nodeValue);
document.write("<br />" + x.length);

Output:

children
1

Example Explanation:

  • By using loadXMLDoc() Set "books.xmlLoad into xmlDoc
  • Set the x variable to a list of all attributes of the first <book> element
  • Output the Value of the "category" Attribute
  • Output the Length of the Attribute List

Try It Yourself (TIY)