5.1 Selecting Elements With the DOM API

jQuery has certainly left its mark on JavaScript developments. To the point that many of the ideas and concepts that originated with jQuery have found their way into the standard DOM. Like for example, when it came to finding elements in the document, used to we only had two ways. The first was to use the getElementById method, which certainly works but we had to put an ID on every element that we wanted to quickly access in Java Script. And that was okay, but a lot of us didn't really want to do that. The other option was to walk the DOM and we have certainly seen how that is such a horrible way of finding elements in the document. So jQuery came along and introduce the ID of using CSS selectors because after all that has work very well for CSS and add to work well for JavaScript. And it does, so after many years we finally have the ability to select elements using CSS selectors with the standard DOM. So, we are going to do essentially what we have done in this final line of code where we are going to select just the LI and P elements. And then change their background color. Now with the standard dome we do have to write extra code that's always something that we have to do. However, we can achieve the same results with writing far less code than we used to have to. And I should say that the use of jQuery is still popular but it's becoming less and less popular because, all of the benefits that jQuery gave us, at least as far as finding elements and doing something called AJAX which is something that we are going to look at in the later lesson are now standard. And they have been heavily influenced by jQuery, and we're getting to the point that jQuery just doesn't offer us a whole lot of extra benefits. So we're going to start by creating a variable called elements and we're going to use our document object. And we're going to call one of two methods. Now the first method is called query selector. And then we can pass in our CSS selector. And it's going to find the first element, that matches this selector. So the querySelector method returns just a single element, and in this case it's going to be this Li element here because that is the first element in the document that matches this selector. That we want all of the LIMP elements so, we're going to use the second method called querySelector all. This is going to return all of the elements that match, our selector. And this returns what's called a NodeList. Which is nothing more than a collection of elements. Now, when it comes to a node list, we don't have an easy way of changing the style like using jQueries CSS method. Instead what we have to do is iterate over this NodeList. Now, by iterate I mean that we have to go and look at every single element within this collection. And that sounds kind of tedious and it can be, but we have some tools that's going to make that a lot easier. Like for example we have this elements NodeList and we can use a method called forEach. So, the ideas that for each item within this elements NodeList, we're going to execute some code, and this code is actually going to be a function. We have to write a function that we will pass to the for each method, and then for every item in this elements node list it's going to execute that function. So let's write that function, let's call it changeElementStyle, and we need the element that we are going to be working with. And we have simply going to change the style backgrounds color lets not do grey because grey was well a little dark, so we're going to use silver. And then we are going to pass that change element style function to this forEach method. Now we are not calling this function, now so far every function that we have used, we have called it by using a pair of parenthesis at the end, but that's not the case here. We're using just the name itself of that function because in JavaScript the function is just another type of object. It's a value that we can assign to variables, we can pass it to other functions. And it's one of the most powerful features of JavaScript. So in this case, we're saying that we want to use this changeElementStyle function for each element in our elements variable. And if we go look at Chrome, let's refresh the page, we are not going to see anything. Let's make sure I saved the file, I didn't and we will refresh, and now we have a silver background for all our LI elements, as well as our P elements. Now, if we go look at Edge let's refresh the page, nothing happends. Well, here's the thing. We have this ForEach method, and we can use that on a node list. Inside of a Chrome and it will be fine. We can't use it with Edge or Internet Explorer for that matter. Now, we will be able to use it in Edge in the future but since Microsoft has stopped development on Internet Explorer, we'll we're kind of out of luck there unless if we write our own code and we can do that. We can create what's called a polyfil which will allow us to use new features in old browsers. So let's do that. Now, unfortunately this is going to be using some things that we just haven't talked about. So I apologize up front for not really explaining this code. But, basically, what we want to do is check to see if a NodeList object has a method called forEach. And, if it doesn't, then we are going to write our own forEach method. And, this is only going to execute for Internet Explorer, and Edge, so let's go ahead and write something to the console with console.log, and we'll say creating Nodelist.forEach. That way we can see what browser uses this polyfill and which browser doesn't. So in this case, we're going to use the forEach method on an array because that's where the forEach method originated from. It was added to array objects so that we could Iterate over those arrays, and then people started to want to use those for node list. So, this is actually older code that we had to write in order to use forEach with a NodeList. But in this case it's going to be very simple code. Now first, we need to say NodeList.prototype.forEch = function that's going to accept a callback. And then we are going to use the four each method on an array, we're going to call it as if it were a NodeList and now we're going to pass in our callback function. So, let's say that, we're going to call this for each polyfill and then we are going to add it to the page. And we'll do that at the top so that it gets loaded before our code executes. And we will add that with a source attribute. We will close the script tag. And everything should work now. So if we go to Chrome, we will see the same results as we had before. Let's go ahead and open up the developer tools, we will refresh the page, and we have a problem with our polyfill, there is an uncaught SyntaxError on line two so let's look at line two. That is when we write to the console I did not end that string so, that should fix that we will refresh the page now we don't see the message here that's because the four each method can be used on the NodeList in Chrome so we see the same results as we had before. But if we go to Edge, let's also press F12 to pull up the developer tools. Let's refresh the page and we have the results as we had before in Chrome and we can also see that this is creating the forEach method for NodeList. So when it comes to finding elements with the standard DOM, we have three very useful methods. We have the getElementById method, which is something that you have seen. We have the querySelector method, which returns a single element and then we have the querySelector all method that returns a NodeList. You also learned about polyfills and how they allow us to use new features now. Polyfills are extremely common and you will find yourself using them more and more as new features are introduced.