6.3 Working With `NodeLists`

In the previous lesson you learned how to find elements in the document. So we looked at the getElementById, the querySelector, and the querySelectorAll methods. And they all worked, however, the last one, querySelectorAll, gave us a different type of object. GetElementById and querySelector just gave us an individual element that we could work with. The querySelectorAll method gives us what's called a node list. It is a collection of all of the elements that match our CSS query. Now let's first of all talk about why it's called a node list. And that's because inside of the document object model every type of object is a node. It is the smallest building block used by all of the objects in the document, like atoms are the smallest building block of just about everything. So because in the document object model everything is a node then a collection of nodes is called a node list. Now the way that we work with a node list has changed over many, many years to the point to where today it is very simple. Now the reason why it is simple is because the browsers that we have today have been programed to make it a little simple. But if you have to support an older browser, like Internet Explorer, hopefully you don't. Well, then things would be a little bit different. We're not going to focus on that, we're going to focus on the code that we can write today. So we want to change all of our span elements to the color blue. So to do that, first of all, we need to use our spanElements variable. This is our node list and since this is a collection, we can do something for each element in our node list. Now this forEach is a method and a method is nothing more than a function that is attached to an object. So we will want to execute forEach, which means that we need a set of parentheses after it. But the forEach method needs something to work with. It's going to work with the node list, but it also needs a function. It's something that we call a callbackfunction, and it's called a callbackfunction because this forEach method is going to call whatever function that we specify. If that doesn't make sense, hopefully this will. We're going to write a function called setColorBlue. And we need the element that we are going to be working with, that we want to set the color to blue. So the code is going to look almost exactly like we have on line 12 here, except that we are using a different object. So now that we have this function defined, all we have to do then is just pass that function to forEach. Now notice here, there is a distinct difference between using the name of the function and then executing the function with a set of parentheses afterwards. In this case, we do not want to execute the function. We want to pass this function object, which is what we have. Whenever you define a function, you have created a function object. We want to pass that function object to forEach, and then behind the scenes for every element in this node list, it's going to execute this setColorBlue. It's going to pass in the element and then that function will execute. So that whenever we save this over on the right hand side, we see that the text is now all blue. But let's do one other thing. We have this spanElement and let's change that to firstSpan. And let's set something unique here, not necessarily the color, but let's do something with the font weight just so that it stands out. And we will set that to bold. So we save that and once again, the firstSpan that it is selected with the querySelector method is bold, but then all of the span elements are set to have a blue color. So far we've been looking at how to set individual CSS properties using the style object. Well in the next lesson you will learn how we can manipulate style with classes.