1 00:00:00,000 --> 00:00:05,512 The last selectors we'll look at are querySelector and querySelectorAll. 2 00:00:05,512 --> 00:00:09,290 These are the most flexible of all the DOM selectors. 3 00:00:09,290 --> 00:00:14,890 They accept IDs, classes, tag names, and just about any valid CSS selector. 4 00:00:14,890 --> 00:00:18,986 They specifically work well with descendant and attribute selectors, for 5 00:00:18,986 --> 00:00:19,567 example. 6 00:00:19,567 --> 00:00:24,545 The querySelector method returns the first element that matches the specified 7 00:00:24,545 --> 00:00:25,293 selector. 8 00:00:25,293 --> 00:00:30,686 And querySelectorAll returns a collection of all elements or 9 00:00:30,686 --> 00:00:33,909 nodes matching the given selector. 10 00:00:33,909 --> 00:00:38,287 I'll teach you how these selection methods work in the browser console first. 11 00:00:38,287 --> 00:00:46,010 I'll start by selecting a button element with document.querySelector and 12 00:00:46,010 --> 00:00:49,939 pass it the button tag name as a string. 13 00:00:49,939 --> 00:00:53,658 Even though there are multiple button elements in the document, 14 00:00:53,658 --> 00:00:57,040 the browser only returns the first one it finds. 15 00:00:57,040 --> 00:01:00,747 This selection method is flexible, so I can be more specific 16 00:01:00,747 --> 00:01:04,392 by passing it the class or ID of the element I want to select. 17 00:01:04,392 --> 00:01:11,450 For example, the button with the class btn-toggle. 18 00:01:11,450 --> 00:01:16,298 Remember, when using querySelector and querySelectorAll, 19 00:01:16,298 --> 00:01:20,783 you need to specify the selector as you'd write it in CSS. 20 00:01:20,783 --> 00:01:26,211 This means adding a dot character when selecting a class, 21 00:01:26,211 --> 00:01:32,211 and the hash or pound sign when targeting an ID, like headline. 22 00:01:32,211 --> 00:01:35,560 Otherwise, the methods will return null or 23 00:01:35,560 --> 00:01:38,919 throw an exception or error in the console. 24 00:01:38,919 --> 00:01:43,224 Next, I'll select all the li elements in 25 00:01:43,224 --> 00:01:48,759 the document using document.querySelectorAll and 26 00:01:48,759 --> 00:01:52,330 pass it the li tag name as a string. 27 00:01:53,480 --> 00:01:55,448 Let's see what this returns. 28 00:01:55,448 --> 00:01:58,930 This time we get something called a NodeList. 29 00:01:58,930 --> 00:02:05,385 And like an HTMLCollection, it resembles an array holding all the li tag names 30 00:02:07,443 --> 00:02:11,443 And if we pass the querySelectorAll method, 31 00:02:11,443 --> 00:02:16,390 the class highlight, it selects and returns a NodeList 32 00:02:16,390 --> 00:02:21,561 containing just the list items with the class highlight. 33 00:02:21,561 --> 00:02:26,235 A NodeList and an HTMLCollection are very similar. 34 00:02:26,235 --> 00:02:30,482 They're both array-like collections of DOM nodes in the order they appear on 35 00:02:30,482 --> 00:02:31,072 the page. 36 00:02:31,072 --> 00:02:36,224 The distinction between the two is not super important to know right now, 37 00:02:36,224 --> 00:02:40,973 but in short, a NodeList is more flexible than an HTMLCollection. 38 00:02:40,973 --> 00:02:43,690 It can contain any type of DOM node. 39 00:02:43,690 --> 00:02:48,994 For example, a NodeList can contain element nodes and text nodes. 40 00:02:48,994 --> 00:02:53,732 You can also iterate through a NodeList in the same way you would an array, 41 00:02:53,732 --> 00:02:58,546 using a for loop, for of, and other array iteration methods, like map and 42 00:02:58,546 --> 00:03:01,312 forEach, which you may not have used yet. 43 00:03:01,312 --> 00:03:05,892 However, an HTMLCollection can contain HTML elements only and 44 00:03:05,892 --> 00:03:09,720 you can't loop over it exactly as you would an array. 45 00:03:09,720 --> 00:03:12,600 You don't need to worry about what all this means in this course, but 46 00:03:12,600 --> 00:03:16,040 I've posted resources in the teacher's notes if you want to learn more. 47 00:03:16,040 --> 00:03:21,134 The main difference to remember between an HTMLCollection and 48 00:03:21,134 --> 00:03:26,130 a NodeList is that HTML collection is a live data structure and 49 00:03:26,130 --> 00:03:29,221 NodeList is a static data structure. 50 00:03:29,221 --> 00:03:34,217 An HTMLCollection automatically updates each time it detects a change in 51 00:03:34,217 --> 00:03:36,482 the items retrieved by a method. 52 00:03:36,482 --> 00:03:41,335 A NodeList remains the same, no matter the changes that occur in your HTML. 53 00:03:41,335 --> 00:03:45,815 In other words, every time a new element gets appended to the DOM, 54 00:03:45,815 --> 00:03:47,896 with JavaScript for example, 55 00:03:47,896 --> 00:03:53,272 an HTMLCollection will recognize the new element, while a NodeList will not. 56 00:03:53,272 --> 00:03:58,224 Okay, so we know that querySelector returns the first matching 57 00:03:58,224 --> 00:04:02,810 element only and that querySelectorAll returns a NodeList 58 00:04:02,810 --> 00:04:06,395 holding all elements matching the selector. 59 00:04:06,395 --> 00:04:09,955 Let's now jump over to app.js and 60 00:04:09,955 --> 00:04:14,991 replace getElementsByTagName here in the items 61 00:04:14,991 --> 00:04:20,042 variable declaration with querySelectorAll. 62 00:04:20,042 --> 00:04:24,868 And just below, replace the getElementsByClassName method 63 00:04:24,868 --> 00:04:29,787 assigned to the highlights variable with querySelectorAll, 64 00:04:29,787 --> 00:04:34,518 making sure that we update the string passed to this method to 65 00:04:34,518 --> 00:04:38,157 .highlight since we're targeting a class. 66 00:04:38,157 --> 00:04:43,514 And to get more practice with document.querySelector, 67 00:04:43,514 --> 00:04:48,990 I'll change the ID of this first button element to a class. 68 00:04:48,990 --> 00:04:51,824 Then in my JavaScript, 69 00:04:51,824 --> 00:04:57,780 change the selection method from getElementById 70 00:04:57,780 --> 00:05:02,893 to querySelector('.btn-main'). 71 00:05:02,893 --> 00:05:07,641 I'll save my file and refresh the browser to make sure 72 00:05:07,641 --> 00:05:12,085 that everything works as expected, and it does. 73 00:05:12,085 --> 00:05:18,355 As you can see, these DOM selection methods are really powerful and flexible. 74 00:05:21,913 --> 00:05:26,310 You've learned various ways to select elements so far, and in some cases, 75 00:05:26,310 --> 00:05:28,936 different ways to make the same selections. 76 00:05:28,936 --> 00:05:30,058 You may be wondering, 77 00:05:30,058 --> 00:05:33,431 how do I know I'm using the right tool to select the right elements? 78 00:05:33,431 --> 00:05:34,950 Good question. 79 00:05:34,950 --> 00:05:38,313 Part of the answer is going to be shaped by your HTML. 80 00:05:38,313 --> 00:05:41,505 Are there IDs on the elements you want to select? 81 00:05:41,505 --> 00:05:45,251 Do you want to select all elements with a given tag or class name? 82 00:05:45,251 --> 00:05:50,059 Or perhaps you want your selection methods to be more flexible, accepting IDs, 83 00:05:50,059 --> 00:05:52,974 classes, tag names, and other CSS selectors? 84 00:05:52,974 --> 00:05:56,976 Keep in mind that some methods return the first matching element, 85 00:05:56,976 --> 00:06:01,060 while others return a collection or list of all matching elements. 86 00:06:01,060 --> 00:06:03,311 It's a lot of information to keep track of, so 87 00:06:03,311 --> 00:06:06,893 I've provided resources to help you evaluate the tools you wish to use for 88 00:06:06,893 --> 00:06:09,640 your projects in the teacher's notes with this video.