Sun Dial Menu


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

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

The code above comes from the 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.

Top Menu

Site design by Tempusfugit Web Design -