9.1 The Selector API

Hi folks, we are now in the final section of the course. In this section we're gonna focus on some of the newer web APIs that are available for working with different features of today's modern browsers. Starting with the selector API in this lesson. The selector API gives us the ability to use CSS selectors in order to select elements from the page. Much like we became accustomed to doing through the use of popular JavaScript libraries like jQuery. Using simple CSS selectors in JavaScript was groundbreaking when jQuery first introduced the concept. But it's now supported by defaults natively in today's modern browsers. We don't need to make use of a separate library in order to make use of CSS selectors. The selector API is very simple. It consists of just two methods, querySelector, and querySelectorAll. These methods can be called on documents, document fragments, or on individual elements. And they behave in very similar ways. The querySelector method returns the first element it finds that matches the selector passed to the method So we can see that using an ID selector is very, very similar to using document.getElementById. But we are using a CSS selector, and we can pass any CSS selector to the querySelector method no matter how complex. So instead of selecting the heading, let's select the first child of the list instead. And this time we've managed to select the first child using the css:first-child selector. So this is much more flexible than getElementById which only allows us to select elements using their ID. So querySelector will only return the first element that it finds. So if we were to do something like this instead, We still only get a single list item. If we want to return multiple elements we need to use querySelectorAll instead. And now we get a node list much like we would get returned from one of the methods like getElementsByTagName. So in this lesson we looked at the selector API which is simple and intuitive to use. It works in exactly the way that we would expect and consists of just a couple of simple methods that accept limited arguments. This API is supported in all modern browsers. In the next lesson, we can look at geolocation. Thanks for watching.