1 00:00:02,310 --> 00:00:06,100 Now getElementById is one very convenient 2 00:00:06,100 --> 00:00:08,820 and good way of getting access to an element 3 00:00:08,820 --> 00:00:11,990 by a unique identifier, by its ID. 4 00:00:11,990 --> 00:00:15,811 But it's not the only way of getting access to an element. 5 00:00:15,811 --> 00:00:20,240 An alternative is another utility function, 6 00:00:20,240 --> 00:00:23,110 which you have built into JavaScript. 7 00:00:23,110 --> 00:00:27,220 And that's the querySelector method, 8 00:00:27,220 --> 00:00:30,253 which is also part of this document object. 9 00:00:31,280 --> 00:00:34,443 So you see this document object is rather important, 10 00:00:35,450 --> 00:00:38,880 just like getElementById, this is a method. 11 00:00:38,880 --> 00:00:42,630 So we execute it like this with parentheses, 12 00:00:42,630 --> 00:00:44,320 but unlike ID, 13 00:00:44,320 --> 00:00:48,390 this does not want an ID as a parameter, 14 00:00:48,390 --> 00:00:52,820 but instead it wants a CSS selector. 15 00:00:52,820 --> 00:00:55,520 So as we would have used it in CSS code 16 00:00:57,360 --> 00:01:01,300 As a string, but then any selector of our choice. 17 00:01:01,300 --> 00:01:03,350 So we can use a tag selector here, 18 00:01:03,350 --> 00:01:06,253 a clause selector or an ID selector. 19 00:01:07,320 --> 00:01:11,100 So I could also select this element by ID by 20 00:01:11,100 --> 00:01:14,660 writing this appropriate CSS ID selector, 21 00:01:14,660 --> 00:01:17,920 which is #external-id 22 00:01:19,040 --> 00:01:22,800 That's how we would select an element by ID in CSS. 23 00:01:22,800 --> 00:01:27,653 And that's the kind of parameter value querySelector wants. 24 00:01:28,670 --> 00:01:31,630 And now this will look for an element like this. 25 00:01:31,630 --> 00:01:35,480 So here I then also again, get my anchor element. 26 00:01:35,480 --> 00:01:39,490 And then here I can change this to yet another address. 27 00:01:39,490 --> 00:01:43,763 For example, to our own homepage academind.com. 28 00:01:44,720 --> 00:01:48,570 Now this is an alternative to getElementById. 29 00:01:48,570 --> 00:01:50,540 And when you have alternatives, 30 00:01:50,540 --> 00:01:54,030 the obvious question is always which alternative 31 00:01:54,030 --> 00:01:56,590 where which approach is better. 32 00:01:56,590 --> 00:02:00,640 Now the short answer is there is no better or worse approach 33 00:02:00,640 --> 00:02:02,140 you can use either of the two. 34 00:02:03,000 --> 00:02:05,010 but there is a key difference, actually. 35 00:02:05,010 --> 00:02:08,800 getElementById as the name suggests is 36 00:02:08,800 --> 00:02:12,380 really focused on getting elements by ID. 37 00:02:12,380 --> 00:02:15,400 So it's a great way of getting a specific element 38 00:02:15,400 --> 00:02:19,010 if you added an ID to it in your HTML code, 39 00:02:19,010 --> 00:02:21,973 which you as the developer can always do. 40 00:02:23,683 --> 00:02:27,940 querySelector on the other hand, wants any CSS selector. 41 00:02:27,940 --> 00:02:30,333 it doesn't have to be the ID selector. 42 00:02:31,210 --> 00:02:35,100 So here I could, alternatively also select my anchor tag 43 00:02:35,100 --> 00:02:38,700 by not using the ID here, 44 00:02:38,700 --> 00:02:43,460 but the "a" CSS selector, the type selector. 45 00:02:43,460 --> 00:02:46,163 So selecting by HTML type. 46 00:02:48,770 --> 00:02:51,810 Just as we can write CSS rules like this, 47 00:02:51,810 --> 00:02:52,980 where we then for example, 48 00:02:52,980 --> 00:02:56,650 change the color of all anchor elements. 49 00:02:56,650 --> 00:02:59,009 That's what we can do in CSS. 50 00:02:59,009 --> 00:03:01,503 And that's what we can do with querySelector. 51 00:03:02,770 --> 00:03:05,600 And this will then select the first, important, 52 00:03:05,600 --> 00:03:08,753 the first anchor element it finds on your page. 53 00:03:09,600 --> 00:03:11,790 If you have multiple anchor elements 54 00:03:11,790 --> 00:03:14,340 in different places of your HTML code, 55 00:03:14,340 --> 00:03:18,180 querySelector will always give you the first element 56 00:03:18,180 --> 00:03:20,653 that matches this selector condition. 57 00:03:21,720 --> 00:03:25,970 But it's the extra flexibility compared to getElementById 58 00:03:25,970 --> 00:03:27,163 that could be useful. 59 00:03:28,100 --> 00:03:32,840 You can also have more complex selectors in here like "p a" 60 00:03:32,840 --> 00:03:35,450 So selecting the first anchor element that sits 61 00:03:35,450 --> 00:03:37,330 inside of a paragraph. 62 00:03:37,330 --> 00:03:39,660 Just what you can do in CSS as well, 63 00:03:39,660 --> 00:03:41,930 selecting anchor elements and paragraphs. 64 00:03:41,930 --> 00:03:45,080 That's how you can do it here with the important difference 65 00:03:45,080 --> 00:03:48,680 that this will always select the first matching element, 66 00:03:48,680 --> 00:03:51,053 not all matching elements. 67 00:03:51,980 --> 00:03:54,400 If you want to match all elements, 68 00:03:54,400 --> 00:03:56,950 then you have querySelectorAll. 69 00:03:56,950 --> 00:03:59,620 This will then not return a single element, 70 00:03:59,620 --> 00:04:01,870 but all matching elements. 71 00:04:01,870 --> 00:04:05,363 So it will return an array instead of a single object. 72 00:04:06,350 --> 00:04:08,860 Here I want a single element, 73 00:04:08,860 --> 00:04:11,763 so querySelector is what I want to use here. 74 00:04:12,990 --> 00:04:15,150 And for the moment, that's it. 75 00:04:15,150 --> 00:04:18,450 It already was a lot of new knowledge 76 00:04:18,450 --> 00:04:20,560 with the drilling we can do 77 00:04:20,560 --> 00:04:23,140 with those different utility functions. 78 00:04:23,140 --> 00:04:27,370 But these are core mechanisms of selecting content 79 00:04:27,370 --> 00:04:32,370 off your page and of working with JavaScript and the dom. 80 00:04:32,620 --> 00:04:35,130 I can only encourage you that you do 81 00:04:35,130 --> 00:04:39,050 play around with this console here in the dev tools 82 00:04:39,050 --> 00:04:42,400 to find out what's inside the body here. 83 00:04:42,400 --> 00:04:46,340 To drill into this body and use console.dir 84 00:04:46,340 --> 00:04:50,600 to get that object view here. 85 00:04:50,600 --> 00:04:51,680 So to say, 86 00:04:51,680 --> 00:04:54,150 where you can really find out which properties 87 00:04:54,150 --> 00:04:55,330 you have in there 88 00:04:55,330 --> 00:04:58,040 and how you could use these properties to 89 00:04:58,040 --> 00:05:00,370 navigate around between elements 90 00:05:00,370 --> 00:05:03,713 or to access or change their content. 91 00:05:04,570 --> 00:05:06,000 Play around with that, 92 00:05:06,000 --> 00:05:08,171 because we'll do that a lot throughout the course, 93 00:05:08,171 --> 00:05:10,750 but it definitely also won't hurt 94 00:05:10,750 --> 00:05:13,483 if you play around a little bit with that first.