1 00:00:00,000 --> 00:00:04,679 [MUSIC] 2 00:00:04,679 --> 00:00:08,266 >> You've learned enough about CSS selectors to change the appearance of 3 00:00:08,266 --> 00:00:09,170 webpages. 4 00:00:09,170 --> 00:00:12,984 But why is it also important that you understand selectors when working with 5 00:00:12,984 --> 00:00:13,706 JavaScript? 6 00:00:13,706 --> 00:00:17,642 As you've learned, selection is a way to identify an element for a browser, so 7 00:00:17,642 --> 00:00:21,760 the browser can find it and make it available for us to do something with it. 8 00:00:21,760 --> 00:00:25,350 For example, target a visited link and change its text color to azure. 9 00:00:26,360 --> 00:00:31,110 Well you also use selectors in JavaScript when writing code that works with the DOM, 10 00:00:31,110 --> 00:00:32,870 or Document Object Model. 11 00:00:32,870 --> 00:00:36,460 Just like CSS selectors control the appearance of elements on a web page, 12 00:00:36,460 --> 00:00:40,750 selectors are used in JavaScript to let you control an element's behavior, and 13 00:00:40,750 --> 00:00:42,840 apply functionality to the page. 14 00:00:42,840 --> 00:00:46,090 There are lots of tasks you can perform once you select an element 15 00:00:46,090 --> 00:00:47,140 with JavaScript. 16 00:00:47,140 --> 00:00:50,060 Like, read its content and manipulate it in many ways. 17 00:00:51,290 --> 00:00:53,930 JavaScript provides methods that let you select and 18 00:00:53,930 --> 00:00:58,580 retrieve elements from the DOM by matching against one or a set of selectors. 19 00:00:58,580 --> 00:01:03,190 You can select HTML elements based on their ID, class, 20 00:01:03,190 --> 00:01:05,760 type, attributes, and values, and more. 21 00:01:05,760 --> 00:01:09,670 For instance, the get element by ID method targets an element, 22 00:01:09,670 --> 00:01:15,040 who's ID value matches the ID selector you include between the parentheses. 23 00:01:15,040 --> 00:01:17,052 And you can see an example of that here. 24 00:01:17,052 --> 00:01:20,981 [BLANK AUDIO]. 25 00:01:20,981 --> 00:01:25,310 Notice the selectors pass to the method here in the mdm docs. 26 00:01:25,310 --> 00:01:28,730 When you pass into many of JavaScript selection methods, 27 00:01:28,730 --> 00:01:30,750 is the same as a CSS selector. 28 00:01:32,030 --> 00:01:35,260 Other selection methods like querySelector and 29 00:01:35,260 --> 00:01:40,440 querySelectorAll accept class, element, and attribute selectors. 30 00:01:40,440 --> 00:01:43,970 As well as, the pseudo classes and combinators you learned earlier 31 00:01:43,970 --> 00:01:47,860 to determine what element or elements should be returned. 32 00:01:47,860 --> 00:01:51,270 Now you don't need to worry about what all these JavaScript code means yet, 33 00:01:51,270 --> 00:01:54,730 you'll learn about them in a later course about JavaScript in the DOM. 34 00:01:54,730 --> 00:02:00,377 I just wanted to show you some examples of how selectors get applied in JavaScript. 35 00:02:00,377 --> 00:02:01,967 So coming in this stage, 36 00:02:01,967 --> 00:02:06,367 we'll have a deeper look at the role of CSS selectors in JavaScript and 37 00:02:06,367 --> 00:02:11,027 go over tips for naming your selectors and working with selectors in JavaScript. 38 00:02:11,027 --> 00:02:11,757 Let's keep it going.