querySelectorAll JavaScript Code Example

Last Updated On Thursday 20th Jan 2022

The most versatile method, elem.querySelectorAll(css) returns all elements inside elem matching the given CSS selector.

  • querySelectorAll returns a list of Nodes.

Example 1

	<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
	
	let elements = document.querySelectorAll('ul > li:last-child');

for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
}
	

Example 2

  • Example with Multiple Events
	let items = document.querySelectorAll("li");
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener("mouseout", function () {
    let tagElement = items[i].previousElementSibling;
    tagElement.classList.remove("clsone");
  });
  items[i].addEventListener("mouseover", function () {
    let tagElement = items[i].previousElementSibling;
    tagElement.classList.add("clstwo");
  });
}