querySelector and querySelectorAll

Hi Lee,

I understand your theory, and in principle it was something that got me too.

However, it is important to understand what the querySelectorAll() method returns. According to the Javascript MDN:

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

querySelectorAll MDN

So we know that the querySelectorAll method returns a nodeList and we can find out about a nodeList from this:

NodeList objects are collections of nodes such as those returned by Node.childNodes and the document.querySelectorAll method. Although NodeList is not an Array, it is possible to iterate on it using forEach(). Several older browsers have not implemented this method yet.

nodeList MDN

My advice going forward would be to make use of the resources available to you, such as the Mozilla Developer Network, as they can really help understand things with some good examples and explanations.

Here's my jsFiddle

Cheers

You can only change a property on one element at a time.

A collection of elements has no "style" property, but each individual element does. That's why you use a loop to access them.

Instead of elements, imagine you had some dials with color settings — you could easily set one dial to a particular color setting. But if you had a box full of them (a collection), you couldn't just set a color on the box itself. You'd have to go through the box and set each dial individually.

Thank you for your help