XML DOM Node List

Welcome to The Coding College! In this tutorial, we will cover XML DOM Node Lists, focusing on how they work, their properties, and how to use them effectively when working with XML documents.

What Is an XML DOM Node List?

An XML DOM Node List is a collection of nodes retrieved from an XML document. Node lists are often the result of methods like getElementsByTagName(), getElementsByClassName(), or the childNodes property. They are live collections, meaning they automatically update if the document structure changes.

Characteristics of Node Lists

1. Collection of Nodes

A Node List contains multiple nodes. These nodes can be elements, attributes, or text nodes depending on how the Node List was retrieved.

2. Indexed Like an Array

You can access individual nodes using an index, similar to how arrays work in JavaScript:

const nodes = xmlDoc.getElementsByTagName("book");
console.log(nodes[0]); // Accesses the first <book> node

3. Live Updates

A Node List is live, meaning changes to the DOM are reflected in the list immediately.

Example XML

Here’s an example XML document we’ll use for demonstrations:

<library>
  <book id="1">
    <title>XML Basics</title>
    <author>John Doe</author>
  </book>
  <book id="2">
    <title>JavaScript Essentials</title>
    <author>Jane Smith</author>
  </book>
</library>

How to Create a Node List

Using getElementsByTagName()

The getElementsByTagName() method retrieves all elements with a specified tag name and returns them as a Node List.

const parser = new DOMParser();
const xmlString = `
  <library>
    <book id="1">
      <title>XML Basics</title>
      <author>John Doe</author>
    </book>
    <book id="2">
      <title>JavaScript Essentials</title>
      <author>Jane Smith</author>
    </book>
  </library>
`;
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

// Get all <book> elements
const books = xmlDoc.getElementsByTagName("book");
console.log(books.length); // Output: 2

Accessing Nodes in a Node List

Using Indexing

You can access individual nodes in a Node List using their index:

// Access the first book's title
const firstBook = books[0];
const title = firstBook.getElementsByTagName("title")[0].textContent;
console.log(title); // Output: "XML Basics"

Iterating Through a Node List

A Node List can be looped through using a for loop or a for...of loop.

// Loop through all books and log their titles
for (let i = 0; i < books.length; i++) {
  const title = books[i].getElementsByTagName("title")[0].textContent;
  console.log(title);
}

Output:

XML Basics  
JavaScript Essentials  

Live Nature of Node Lists

Node Lists update automatically when changes are made to the DOM.

// Add a new book to the XML
const newBook = xmlDoc.createElement("book");
newBook.setAttribute("id", "3");
const newTitle = xmlDoc.createElement("title");
newTitle.textContent = "Learn Python";
newBook.appendChild(newTitle);
xmlDoc.documentElement.appendChild(newBook);

console.log(books.length); // Output: 3 (Node List updated automatically)

Properties of Node Lists

length

The length property returns the number of nodes in the list.

console.log(books.length); // Output: 3

item(index)

The item() method is an alternative to indexing, returning the node at the specified index.

const secondBook = books.item(1);
console.log(secondBook.getElementsByTagName("title")[0].textContent); // Output: "JavaScript Essentials"

Converting a Node List to an Array

A Node List is not a real JavaScript array, but you can convert it to one using Array.from() or the spread operator.

Using Array.from()

const booksArray = Array.from(books);
booksArray.forEach((book) => {
  console.log(book.getElementsByTagName("title")[0].textContent);
});

Using the Spread Operator

const booksArray = [...books];
booksArray.forEach((book) => {
  console.log(book.getElementsByTagName("title")[0].textContent);
});

Practical Use Cases

1. Retrieve All Elements of a Type
   For example, retrieving all <input> elements in a web form or all <book> elements in an XML document.
2. Live Updates in Dynamic Applications
   Use the live nature of Node Lists to automatically reflect changes in XML when elements are added or removed dynamically.
3. Data Display
   Loop through Node Lists to display data (like book titles and authors) dynamically in web applications.

Node Lists vs Other Collections

Conclusion

XML DOM Node Lists are a powerful way to work with collections of nodes in an XML document. Whether you’re retrieving elements with getElementsByTagName() or navigating the DOM with childNodes, Node Lists enable efficient and flexible handling of XML data.