[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.08,0:00:06.10,Default,,0000,0000,0000,,You've now got a lot of tools\Nin your toolbox for finding elements.
Dialogue: 0,0:00:06.10,0:00:08.64,Default,,0000,0000,0000,,And those will work great\Na lot of the time.
Dialogue: 0,0:00:08.64,0:00:12.49,Default,,0000,0000,0000,,But there is one final tool\Nthat's the most powerful of them all:
Dialogue: 0,0:00:12.49,0:00:18.07,Default,,0000,0000,0000,,the ability to find elements\Nbased on any CSS selector.
Dialogue: 0,0:00:18.07,0:00:20.38,Default,,0000,0000,0000,,Do you remember CSS selectors?
Dialogue: 0,0:00:20.38,0:00:24.56,Default,,0000,0000,0000,,The basic ones were\Nfinding by tag name,
Dialogue: 0,0:00:24.56,0:00:26.17,Default,,0000,0000,0000,,or ID
Dialogue: 0,0:00:26.17,0:00:27.52,Default,,0000,0000,0000,,or class
Dialogue: 0,0:00:27.52,0:00:30.03,Default,,0000,0000,0000,,But there are many\Nmore advanced selectors:
Dialogue: 0,0:00:30.03,0:00:35.33,Default,,0000,0000,0000,,descendant selectors, attribute selectors,\Ncombined class plus element selectors--
Dialogue: 0,0:00:35.33,0:00:38.55,Default,,0000,0000,0000,,this would be a good time\Nfor you to review CSS selectors
Dialogue: 0,0:00:38.55,0:00:40.64,Default,,0000,0000,0000,,if you've forgotten all of those.
Dialogue: 0,0:00:40.64,0:00:45.64,Default,,0000,0000,0000,,For example, what if I wanted\Nto specifically style only the elements
Dialogue: 0,0:00:45.64,0:00:50.76,Default,,0000,0000,0000,,with class name "animal"\Nthat are inside a paragraph?
Dialogue: 0,0:00:50.76,0:00:54.61,Default,,0000,0000,0000,,Let's stick a `` tag in\Nand do that.
Dialogue: 0,0:00:54.61,0:00:57.12,Default,,0000,0000,0000,,So I would first write `p`,
Dialogue: 0,0:00:57.12,0:01:01.53,Default,,0000,0000,0000,,and then a space, to say that\NI'm looking inside ``s,
Dialogue: 0,0:01:01.53,0:01:06.49,Default,,0000,0000,0000,,and then dot animal to say that\NI'm looking for any elements
Dialogue: 0,0:01:06.49,0:01:09.60,Default,,0000,0000,0000,,with class name "animal".
Dialogue: 0,0:01:09.60,0:01:12.67,Default,,0000,0000,0000,,And I'll just color them red.
Dialogue: 0,0:01:12.67,0:01:14.13,Default,,0000,0000,0000,,Beautiful.
Dialogue: 0,0:01:14.13,0:01:19.66,Default,,0000,0000,0000,,Now, I could use the same CSS selector\Nto find those elements in JavaScript,
Dialogue: 0,0:01:19.66,0:01:24.94,Default,,0000,0000,0000,,using the\N`document.querySelectorAll()` method.
Dialogue: 0,0:01:24.94,0:01:30.32,Default,,0000,0000,0000,,So I'll change this line here.
Dialogue: 0,0:01:30.32,0:01:35.38,Default,,0000,0000,0000,,And I need to pass the CSS selector\Nas the argument,
Dialogue: 0,0:01:35.38,0:01:38.39,Default,,0000,0000,0000,,as a string in quotes.
Dialogue: 0,0:01:38.39,0:01:42.49,Default,,0000,0000,0000,,And there, the paragraph\Nis about cats again.
Dialogue: 0,0:01:42.49,0:01:45.82,Default,,0000,0000,0000,,You could pass any valid\NCSS selector to that function,
Dialogue: 0,0:01:45.82,0:01:48.41,Default,,0000,0000,0000,,and it will return back\Na collection of elements
Dialogue: 0,0:01:48.41,0:01:50.88,Default,,0000,0000,0000,,that you can then loop through.
Dialogue: 0,0:01:50.88,0:01:53.51,Default,,0000,0000,0000,,Do you remember last time\Nhow we said
Dialogue: 0,0:01:53.51,0:01:57.62,Default,,0000,0000,0000,,that `getElementsByTagName()`\Nreturns an HTML collection
Dialogue: 0,0:01:57.62,0:01:59.100,Default,,0000,0000,0000,,that looks a lot like an array?
Dialogue: 0,0:01:59.100,0:02:06.71,Default,,0000,0000,0000,,Well this method returns a `NodeList`,\Nwhich is also a lot like an array,
Dialogue: 0,0:02:06.71,0:02:12.53,Default,,0000,0000,0000,,in that we can use the brackets on it,\Nwe can check the length, all of that.
Dialogue: 0,0:02:12.53,0:02:16.28,Default,,0000,0000,0000,,And you probably won't run into\Nthe differences between
Dialogue: 0,0:02:16.28,0:02:20.03,Default,,0000,0000,0000,,a NodeList and an HTMLCollection\Nwhen you're using these methods.
Dialogue: 0,0:02:20.03,0:02:24.38,Default,,0000,0000,0000,,But you are welcome to look them up\Nif you'd like to learn more about them.
Dialogue: 0,0:02:24.38,0:02:28.92,Default,,0000,0000,0000,,Okay, now, there's also a method\Nthat will look up CSS selectors,
Dialogue: 0,0:02:28.92,0:02:32.78,Default,,0000,0000,0000,,and return only one element,\Nif you know your CSS selector
Dialogue: 0,0:02:32.78,0:02:35.06,Default,,0000,0000,0000,,is only selecting one thing.
Dialogue: 0,0:02:35.06,0:02:37.41,Default,,0000,0000,0000,,In practice, it's not really as useful,\N\N
Dialogue: 0,0:02:37.41,0:02:40.46,Default,,0000,0000,0000,,because you usually have\Nan ID that you can use in that case.
Dialogue: 0,0:02:40.46,0:02:43.08,Default,,0000,0000,0000,,But I'll show it to you just in case.
Dialogue: 0,0:02:43.08,0:02:46.31,Default,,0000,0000,0000,,So here, instead of `getElementById`,\NI could actually say:
Dialogue: 0,0:02:46.31,0:02:48.58,Default,,0000,0000,0000,,`document.querySelector("`
Dialogue: 0,0:02:48.58,0:02:53.56,Default,,0000,0000,0000,,and then for the actual query,\Nto make it be an ID, I just add that hash.
Dialogue: 0,0:02:53.56,0:02:54.52,Default,,0000,0000,0000,,Ta-da.
Dialogue: 0,0:02:54.52,0:02:57.92,Default,,0000,0000,0000,,So, as you see, this is really similar\Nto `querySelectorAll()`,
Dialogue: 0,0:02:57.92,0:03:01.55,Default,,0000,0000,0000,,except we're only selecting one,\Nso it's just `querySelector()`,
Dialogue: 0,0:03:01.55,0:03:06.51,Default,,0000,0000,0000,,and we just pass in some CSS selector\Nthat we expect to get back one element.
Dialogue: 0,0:03:06.51,0:03:10.43,Default,,0000,0000,0000,,So when should you use\Neach of these tools in your toolbox?
Dialogue: 0,0:03:10.43,0:03:13.70,Default,,0000,0000,0000,,The first ones that I showed you\Ntend to perform better.
Dialogue: 0,0:03:13.70,0:03:15.73,Default,,0000,0000,0000,,So I suggest using those when you can.
Dialogue: 0,0:03:15.73,0:03:19.59,Default,,0000,0000,0000,,But if you're in a situation where\Nyou need to use a complex CSS selector,
Dialogue: 0,0:03:19.59,0:03:24.05,Default,,0000,0000,0000,,and you can't use those,\Nthen `querySelectorAll()` is your friend.
Dialogue: 0,0:03:24.05,0:03:26.11,Default,,0000,0000,0000,,Try it out in the next challenge,
Dialogue: 0,0:03:26.11,0:03:31.27,Default,,0000,0000,0000,,then get ready to see way more ways\Nthat you can manipulate this webpage.