Using the querySelectorAll() Function

This Jvascript program demonstrates how to use the querySelectorAll() function to select elements within an HTML document, using the CSS selector syntax.

QuerySelectorAll.html

<!DOCTYPE html>
<html>
	<head>
  	<title>XoaX.net's Javascript</title>
  	<script type="text/javascript" src="QuerySelectorAll.js"></script>
	</head>
	<body onload="Initialize()">
  	<ul id="idTwelveApostles"><h2>The Twelve Apostles</h2>
  		<li id="idFoundation">Saint Peter, formerly Simon and brother of Andrew</li>
  		<li class="cGospel">Saint John, the son of Zebedee and brother of Saint James the Greater</li>
  		<li>Saint Bartholomew, also known as Nathaniel</li>
  		
  		<li>Saint Jude, also known as Thaddeus and was the brother of James the Lesser</li>
  		<li>Judas Iscariot, the Traitor who was replaced by Saint Matthias</li>
  		<li>Saint James the Greater, the son of Zebedee and brother of Saint John</li>
  		
  		<li>Saint James the Lesser, son of Alphaeus and the brother of Saint Jude</li>
  		<li>Saint Andrew, brother of Peter</li>
  		<li>Saint Philip</li>
  		
  		<li class="cGospel">Saint Matthew, also known as Levi</li>
  		<li>Saint Thomas, also know as Didymus</li>
  		<li>Saint Simon the Zealot, the son of Clopas who is also called Jude</li>
  	</ul>
  	<ul id="idOtherApostles"><h2>Other Apostles</h2>
  		<li>Saint Paul</li>
  		<li class="cGospel">Saint Mark</li>
  		<li class="cGospel">Saint Luke</li>
  		<li>Saint Barnabas</li>
  		<li>Saint Apollos</li>
  		<li>Saint Timothy</li>
  		<li>Saint Silas</li>
  	</ul>
  	<hr />
	</body>
</html>

QuerySelectorAll.js

function Initialize() {
	// Select Gospel writers from the Twelve Apostles 
	var qaGospelApostles = document.querySelectorAll("#idTwelveApostles > .cGospel");
	SelectAndDisplayList("Selected Gospel Writers of the Twelve", qaGospelApostles);
	// Select all Gospel writers
	var qaGospelWriters = document.querySelectorAll(".cGospel");
	SelectAndDisplayList("Selected Gospel Writers", qaGospelWriters);
	// Select all Gospel writers outside the Twelve
	var qaGospelWriters = document.querySelectorAll(":not(#idTwelveApostles) > .cGospel");
	SelectAndDisplayList("Selected Gospel Writers outside the Twelve", qaGospelWriters);
	// Select the Foundation of the Church from within the Twelve
	var qaFoundation = document.querySelectorAll("#idTwelveApostles > #idFoundation");
	SelectAndDisplayList("Selected Foundation of the Church from the Twelve", qaFoundation);
	// Select the Foundation of the Church from outside the Twelve
	var qaFoundation = document.querySelectorAll(":not(#idTwelveApostles) > #idFoundation");
	SelectAndDisplayList("Selected Foundation of the Church outside the Twelve", qaFoundation);
}

function SelectAndDisplayList(sHeading, qSelection) {
	// Select the first and only body element
	var qBody = document.querySelector("body");
	var qOrderedListElement = document.createElement("ol");
	var qHeading = document.createElement("h3");
	qHeading.innerHTML = sHeading;
	qOrderedListElement.appendChild(qHeading);
	qBody.appendChild(qOrderedListElement);
	for (var sSelected of qSelection) {
		// These could be added as element, but I jsut add them as text here
		qOrderedListElement.innerHTML += "<li>" + sSelected.innerHTML + "</li>";
	}
}

Core JavaScript

Using the querySelectorAll() Function

QuerySelectorAll.html

QuerySelectorAll.js

Output