document.querySelectorAll

I saw this selector when analysing Bubbling and Capturing.

The syntax for querySelectorAll():

elementList = parentNode.querySelectorAll(selectors);

The element list is an HTML Collection, an array-like list (collection) of HTML elements. (pseudo array)

The usage of querySelectorAll() is helpful if you want to select multiple elements on a page. The elements can be of different specification, they can be tags, ids, classes and more.

The code for Bubbling and Capturing

In the example on my page describing this querySelectorAll() selects ALL elements on the displayed document. As I say on the page I could not show how the Bubbling and Caputuring worked as I need to just select the relevant divs.

The code below selects all elements and adds eventlisteners to them so that when clicked they display their tag names

<script>
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
    elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
  }
</script>
</div>

The code above comes from the javascript.info demo for Bubbling and Capturing.

What MDN say

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.