HtmlCollections Versus NodeLists

This JavaScript Reference section displays the code for an example program that demonstrates the differences between an HTMLCollection and a NodeList.

HtmlCollectionVsNodeList.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>XoaX.net's JavaScript Demo</title>
		<script type="text/javascript" src="SelectElements.js"></script>
	</head>
	<body onload="Loaded()">
		<h3>There is only this single h3 element in the body during the analysis. F12 to see log.</h3> 
	</body>
</html>

SelectElements.js

function Loaded() {
	let qChildrenDiv = document.createElement("div");
	let qChildNodesDiv = document.createElement("div");
	let qChildNodesValuesDiv = document.createElement("div");
	let qAllElementsCollection = document.createElement("p");
	let qAllElementsNodes = document.createElement("p");
	let qBody = document.body;
	// Print the values inside element and output the log values for comparison
	// children of body - HTMLCollection
	qChildrenDiv.innerHTML = "children of body = " + qBody.children + " : ";
	for (let qElement of qBody.children) {
		qChildrenDiv.innerHTML += qElement;
	}
	console.log(qBody.children);
	// childNodes of body - NodeList
	qChildNodesDiv.innerHTML = "childNodes of body = " + qBody.childNodes + " : ";
	for (let qElement of qBody.childNodes) {
		qChildNodesDiv.innerHTML += qElement;
	}
	console.log(qBody.childNodes);
	// Run through the child nodes with a foreach loop
	qChildNodesValuesDiv.innerHTML = "childNodes of body by tagName = "
	qBody.childNodes.forEach(qElement => {
		qChildNodesValuesDiv.innerHTML += qElement.tagName + " ";
		console.log(qElement);
	});

	// An HTMLCollection of all of the elements in the document
	let qAllCollection = document.getElementsByTagName('*');
	qAllElementsCollection.innerHTML = "All Collection = " + qAllCollection;
	qAllElementsCollection.innerHTML += " Constructor Name :" + qAllCollection.constructor.name + "<br />";
	console.log(qAllCollection);
	console.log('Constructor Name :', qAllCollection.constructor.name);
	for (let qElement of qAllCollection) {
		qAllElementsCollection.innerHTML += " " + qElement.tagName;
		console.log('Content :', qElement.toString());
	}
	// We can not call forEach() like this on an HTMLCollection
	//qAllCollection.forEach(qElement => {
	//	console.log(qElement.tagName);
	//});
	
	// An NodeList of all of the elements in the document
	let qAllNodeList = document.querySelectorAll('*');
	qAllElementsNodes.innerHTML = "All Nodes = " + qAllNodeList;
	qAllElementsNodes.innerHTML += " Constructor Name :" + qAllNodeList.constructor.name + "<br />";
	console.log(qAllNodeList);
	console.log('Constructor Name :', qAllNodeList.constructor.name);
	for (let qElement of qAllNodeList) {
		qAllElementsNodes.innerHTML += " " + qElement.tagName;
		console.log('Content :', qElement.toString());
	}
	qAllNodeList.forEach(qElement => {
		console.log(qElement.tagName);
	});

	qBody.appendChild(qChildrenDiv);
	qBody.appendChild(qChildNodesDiv);
	qBody.appendChild(qChildNodesValuesDiv);
	qBody.appendChild(qAllElementsCollection);
	qBody.appendChild(qAllElementsNodes);
}

Core JavaScript

HtmlCollections Versus NodeLists

HtmlCollectionVsNodeList.html

SelectElements.js

Output