XML DOM Node List

Working with collections of XML nodes

📋 What is a Node List?

A Node List is a collection of nodes extracted from an XML document. It acts like an array, allowing you to access multiple elements at once using index numbers. 


// Get all book elements
var books = xmlDoc.getElementsByTagName("book");
console.log(books.length); // Number of books

Understanding Node Lists

Node Lists are returned when you search for multiple elements in XML. They work similarly to arrays but have special properties for XML manipulation. You can loop through them and access individual nodes by their position.

🔢

Length Property

Get the number of nodes 

books.length
📍

Index Access

Access nodes by position 

books[0]
🔄

Loop Through

Iterate over all nodes 

for (i=0; i<books.length; i++)
🎯

Item Method

Alternative access method 

books.item(0)

🔹 Sample XML Data

We'll use this XML for our examples: 

<?xml version="1.0"?>
<library>
    <book>
        <title>HTML Basics</title>
        <author>John Doe</author>
    </book>
    <book>
        <title>CSS Guide</title>
        <author>Jane Smith</author>
    </book>
    <book>
        <title>JavaScript Pro</title>
        <author>Bob Wilson</author>
    </book>
</library>

🔹 Getting a Node List

Use getElementsByTagName() to get a collection of elements: 

// Load XML document
var xmlDoc = parser.parseFromString(xmlText, "text/xml");

// Get all book elements
var books = xmlDoc.getElementsByTagName("book");

// Display the count
console.log("Total books: " + books.length);

Output:

Total books: 3

🔹 Accessing Nodes by Index

Access individual nodes using square brackets or the item() method: 

// Get all titles
var titles = xmlDoc.getElementsByTagName("title");

// Access first title (index 0)
var firstTitle = titles[0].childNodes[0].nodeValue;

// Access second title using item()
var secondTitle = titles.item(1).childNodes[0].nodeValue;

console.log("First: " + firstTitle);
console.log("Second: " + secondTitle);

Output:

First: HTML Basics

Second: CSS Guide

🔹 Looping Through Node List

Use a for loop to process all nodes in the list: 

// Get all book titles
var titles = xmlDoc.getElementsByTagName("title");

// Loop through all titles
for (var i = 0; i < titles.length; i++) {
    var title = titles[i].childNodes[0].nodeValue;
    console.log((i + 1) + ". " + title);
}

Output:

1. HTML Basics

2. CSS Guide

3. JavaScript Pro

🔹 Complete Example

Here's a full working example: 

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xmlText = `<library>
    <book><title>HTML Basics</title></book>
    <book><title>CSS Guide</title></book>
    <book><title>JavaScript Pro</title></book>
</library>`;

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText, "text/xml");

var books = xmlDoc.getElementsByTagName("book");
var output = "Found " + books.length + " books<br>";

for (var i = 0; i < books.length; i++) {
    var title = books[i].getElementsByTagName("title")[0];
    output += title.childNodes[0].nodeValue + "<br>";
}

document.getElementById("demo").innerHTML = output;
</script>

</body>
</html>

Output:

Found 3 books

HTML Basics

CSS Guide

JavaScript Pro

🧠 Test Your Knowledge

How do you get the number of nodes in a Node List?