NodeList objects in the DOM are live

I was surprised when length of collected elements in DOM changed after new node was added. It seems that getElementsByTagName() doesn’t return static collection of found elements but a kind of reference to the node list. No, this is not a bug, it’s a feature and it has a name: “Live node list”.

Please try to click on a button below to add a new list item.

• List Item 1
• List Item 2
• List Item 3

On button click, Javascript code – addListItem() – will add a new list item and call listItemsLength() function. This function will only read “length” property of the previously initialized listItems variable. And what a surprise? Length of listItems variable is automatically updated. The reason is in live node list, no matter where listItems variable is initialized.

// global variable of list item collection
var listItems;

// onLoad event (called once - after page is loaded)
window.onload = function () {
	// collect LI elements (only place where listItems variable is set)
	listItems = document.getElementById('ul_example').getElementsByTagName('li');
	// display length of listItems variable
	listItemsLength();
}

// add list item element to the UL
function addListItem() {
	// create LI element and text node
	var li  = document.createElement('li'),
	    txt = document.createTextNode('New list item');
	// append text node to the list item element
	li.appendChild(txt); 
	// append list item element to the UL
	document.getElementById('ul_example').appendChild(li);
	// and display length of listItems variable after append
	listItemsLength();
}

// display length of listItems variable
function listItemsLength() {
	var length = listItems.length;
	document.getElementById('message').innerHTML = 'Number of list items: ' + length;
}

This feature is documented. At Mozilla developer center you can find that getElementsByTagName() returns “a live NodeList of found elements in the order they appear in the subtree”. And W3C for node list says: “NodeList objects in the DOM are live.”

Hope this post will help in bug hunting – if there was any. ;)