From the course: JavaScript: Enhancing the DOM

Unlock the full course today

Join today to access over 24,700 courses taught by industry experts.

querySelector and querySelectorAll

querySelector and querySelectorAll

From the course: JavaScript: Enhancing the DOM

querySelector and querySelectorAll

- [Instructor] In this video, we'll dive into another approach to select elements. We'll explore two powerful methods, querySelector and querySelectorAll. The first one will only return the first matching result. The second one will return all matching results as a NodeList. Both of them use something that we haven't talked about yet. In order to select elements from the page, these methods need to be passed in a CSS selector. If you're not familiar with the term CSS selector, this is what CSS uses to target HTML elements for a certain layout. Let's only do the three most basic CSS selectors here. We can have the tag, the class and the ID. The tag is just the name of the text. For example, p or image. The CSS selector is just that tag, literally. Classes are preceded by a dot for the CSS selector. So for example, .text. And IDs are preceded by a hashtag. So for example, #puppyParagraph. And that's what you pass in to the querySelector and querySelectorAll. Let's see some examples of…

Contents