Before we can do anything with DOM elements, we have to select them. In the past, this wasn't very easy to do, that's why libraries like jQuery were so popular. It made selecting DOM elements much easier. However, modern JavaScript has come a long way, and you no longer need any external libraries to help with selecting elements. So the two most common methods you want to use when selecting DOM elements are document.querySelector and querySelectorAll, and we'll see the difference in a second. There's also older methods which still work, like getElementById or getElementsByClassName, but they are not as versatile as querySelector, and we'll be sure to take a look at those.

So if you know your CSS selectors, this should seem very familiar to you. So if I were to add a style here, and add a style for the ul elements, you know that this will target every unordered list within the HTML page. So if I add background, say, lightgreen, then both of these unordered lists will turn that color. And they do. So again, the CSS selector we're using here is just the ul tag here. So when using querySelectorAll, we can select elements using a CSS selector. So let's go ahead and do that. So let's say const, let's name the variable ul, we'll say document, so search the entire

So let's go ahead and do that. So let's say const, let's name the variable ul, we'll say document, so search the entire document, but you can also scope it to an element, which we'll take a look at later on. So let's say document.querySelectorAll. And the argument is a CSS selector, in this case, ul. And how about we just console.log that. Okay. So if I save this, you'll see that we get a NodeList returned. And again, just think of this as an array, and it has two items, and each item is the

So if I search for that, this should be an empty node list, and it is. Let's bring that back to the ul. And like I said, this node list is similar to an array, and you can think of it that way. If you need to loop over it, you can do a forEach, but it doesn't have all of the array functions added to it. So like I said, forEach does work. So if I were to forEach over these, ul.forEach, and we should get an element for each iteration, and we can do anything we want with that element. And in the next video, I'll show you some operations you can do to manipulate the actual

And that does work. But if for some reason you need to convert this to an actual array and make use of some array functions, then you can use Array.from, but we save this to a variable, const ulArray equals Array.from, and we can pass in the node list. And now if I just console.log ulArray, that should be an array, and it is, cool. So the other method you want to use is querySelector. Let me just remove this, we'll remove this as well. Now querySelector only returns one element if it's found. So if I change this to querySelector instead of querySelectorAll, it will still work the same, but it's only going to return the first result it finds.

So if I change this to querySelector instead of querySelectorAll, it will still work the same, but it's only going to return the first result it finds. So there are two ul's within this document, but it's only going to return this one here. So if I save that, and we have to console.log that, save that, I have an extra bracket. You see we only get one ul, and I believe it doesn't highlight it here, but this one does correspond to this first unordered list here. So generally speaking, if you only expect one element to be returned, you want to use querySelector. If you expect more than one, then you want to use querySelectorAll. And again, the argument is a CSS selector.

If you expect more than one, then you want to use querySelectorAll. And again, the argument is a CSS selector. So for example, if I had an input here, let's just add that here, input type equals text. Let's give it an ID of to-do-input, say this was a to-do app. This is where we enter the to-do. There it is. And if you know your CSS selectors, then you know we use the pound symbol for IDs, or the number sign, and give it the ID, so to-do-input. And we can change the variable name here, let's say input, and we can console.log that, and that should be this input box here.

And we can change the variable name here, let's say input, and we can console.log that, and that should be this input box here. Again, it doesn't highlight it, but I believe if I did it directly within DevTools, it should highlight it. So if I just paste that in, and it does. So again, we can read values from this, or we can manipulate it in some sort of way, which we'll take a look at more in the next video. For example, if I had some text in here, some text, we can grab the value using input.value. And if I save that, well, that's not going to work because it refreshes the page. But if I did it in DevTools, so if I just saved it to a variable within DevTools, actually

And if I save that, well, that's not going to work because it refreshes the page. But if I did it in DevTools, so if I just saved it to a variable within DevTools, actually input's already declared, so if I do input, we do get that text box. And if I were to add some text in here, and do input.value, that should be the value of the text. So again, if you know your CSS selectors, you can use classes as well, using the .syntax. So let me change this to .todoList, we'll change this back to ULs, and we'll add a todoList. Let me just change this to ULs as well. We'll add a class for the todoLists here. And this should be the same result as before, the two unordered lists.

We'll add a class for the todoLists here. And this should be the same result as before, the two unordered lists. Actually, we're using createSelector here, so it only selects the first one, but if we did all, this should select both of them, and it does. Let me just get rid of this here. So even if I had another ul here, but it wasn't a todoList, say it was a menu or something like that, but we don't add the class of todoList, let's just change this to Home, About, and Contact, to simulate a menu. And if I save that, since it doesn't have the todoList class, createSelectorAll won't select it.

And if I save that, since it doesn't have the todoList class, createSelectorAll won't select it. You can see it's still being styled with the CSS, because we have this rule up here, but we're selecting it with todoList as a class, so we only get these two UL elements here. You can do nested selectors, so say we had some sort of sidebar here, .sidebar, and we had another todoList within here, so let me just grab this and paste this in here, and let me just reinvent this, and let me just change the contents of this. So let me just select these ones and add the word again. So now we have two todoLists, but one is within this sidebar class. Again, we can use nested selectors to target this specific todoList here, so let me just

So now we have two todoLists, but one is within this sidebar class. Again, we can use nested selectors to target this specific todoList here, so let me just make another variable, say const sidebarList equals, and since we're only expecting one element here, we can say document.querySelector, and we can give it a sidebar class, so .sidebar, and if we say .space, or space.todoList, this is a nested selector, and it will only grab that todoList. So if I console.log sidebarList, we should only get that, and we do. Cool. We can even use pseudo-selectors like firstChild, lastChild, and nthChild to grab a specific element.

We can even use pseudo-selectors like firstChild, lastChild, and nthChild to grab a specific element. So say, for example, we wanted to select the first element of each list, we can do that with firstChild. Again, it's just a CSS selector. So how about we change this to allies. We'll select the allies here, so todoList.ally, but we'll say colon firstChild, and let's console.log allies, and if I did that right, it is selecting the first three allies here. So let me just make this a bit smaller, and you can see it should select goShopping, goShopping again, and Andre, because todoList is still a class for this.

So let me just make this a bit smaller, and you can see it should select goShopping, goShopping again, and Andre, because todoList is still a class for this. So if I expand this, we get the first one, the first one, and the first one. And of course, this works for lastChild or nthChild as well. Just remember, if you're expecting more than one result, make sure you use querySelectorAll. So if I did querySelector here, then it's only going to select the first one. Now, like I said earlier, you can also scope your search within a certain element. So right now we're searching the entire document with document.querySelector, but if we replace document with another element, then it will only search within that element.

So right now we're searching the entire document with document.querySelector, but if we replace document with another element, then it will only search within that element. And this can be useful in terms of performance in large documents. So instead of searching the entire document, you just search within a certain element. So let's take a look at that. So how about we grab the sidebar here as an element, and then we'll search for the todoList within this sidebar. So let's say const sidebar equals document.querySelector. Again, we only expect one result here, so we'll use querySelector, and the selector is .sidebar.

Again, we only expect one result here, so we'll use querySelector, and the selector is .sidebar. So that should be an element. So if we console.log sidebar, that should work. So now we can search within this element. So we can say sidebar.querySelector and search for something within it. So in this case, it's todoList again. So .todoList. And of course, you can just do it the other way as well, using a certain selector like I showed you up here, but this is another option you can use.

And of course, you can just do it the other way as well, using a certain selector like I showed you up here, but this is another option you can use. Again, it's good for performance. And let's just save this to a variable named scoped equals that. And again, let's console.log scoped. And that should be our todoList within our sidebar. And it is. Cool. And I do want to mention the older methods you can still use to select elements, and one is getElementById.

And I do want to mention the older methods you can still use to select elements, and one is getElementById. So it's pretty much the same as querySelector, but we have to use an ID. And in this case, we do have an ID on our input up here. So let's say todoInput. So let's say const todoInput2 equals, we can say document.getElementById and pass it the ID. And in this case, you don't pass the selector, so you don't pass the pound symbol in front because it's looking for the ID. So todoInput is fine, and this should be the same result.

because it's looking for the ID. So todoInput is fine, and this should be the same result. So getElementById should return one result if it's found. todoInput2. Okay. Save that. Save that. We do get that input. So this is sort of the equivalent of querySelector, where it only returns one element, but you can only search by ID.

So this is sort of the equivalent of querySelector, where it only returns one element, but you can only search by ID. And the other popular one was document.getElement, or getElementsByClassName. And we'll name this const elements equals getElementsByClassName. We'll search for todoList again, or sorry, not . because it's not a selector, we give it a class. So todoList. And let's console.log that. So console.log(elements). And this time we get an HTML collection instead of a NodeList, which we got back from querySelectorAll.