Target elements in the DOM with querySelector methods

- [Instructor] We first need to know how to target elements in the DOM. Here it's important to remember what you've just learned. That the document is one giant object. And all the elements within the document are nodes inside that object. Some meta and high-level elements like body, title, URL, and more, are properties of the document. And can be retrieved with standard dot notation. So document.body gives you the body. Document.title gives you the title. Document.URL gives you the URL, and so on.

To get to a node or element, or a group of nodes inside the body, we use methods available for document. Traditionally the methods getElementByID, getElementsByClassName, getElementsByTagName, and getElementsByTagNameNS have been used to do this. getElementByID would return the element with the specified ID. The others would return HTML collections, or node lists of all elements with the same class name, tag, or namespace tag.

These methods work fine, but they're often too specific and a bit clunky to work with. Especially if you're looking for a node inside a node inside a node. More recently, two new catchall methods have come along to solve pretty much all our targeting needs. Query Selector, which returns the first instance that matches the specified selectors, and Query Selector All which returns a node list of all elements that match the specified selectors. These selectors are one or more comma separated CSS selectors.

So you target elements within the document with these methods the same way you would target them using a style rule. That makes Query Selector and its sibling both easy to work with, and incredibly powerful. Let's see how these two functions work in real life. In the exercise files for this movie, 05_02, you'll find a website containing a header with a class masthead. To get to that element, we target the class name using the document method Query Selector. Because we're looking for the first instance.

I'll open my console and type in document.querySelector then a parenthesis, quotation, then I say dot masthead, and my quotation and my parenthesis. I hit Return. This returns the document node header with the class masthead. You'll notice I'm using a dot to signify class. And if I was looking for an ID, I would use a hash instead. That's because this is a CSS selector. We're just using it inside JavaScript.

So what's happening here? Well document gives us the entire document. Query Selector looks for the first instance of any item that matches our specified class name or selector. And in this case we're looking for the class name masthead, so we get the first instance. What if we want an element that is used several times? Let's say we want all anchors in the entire document. In that case we'll call the document object and use the Query Selector All method, listing the tag name A as the selector.

Document, Query Selector, all, A. This returns an HTML collection. AKA, a node tree with every single instance of the A element in the entire document. And we can sort through them using a regular array index because this is just a regular array. Each of these items is the actual item, and we can get all the information about them including the properties, and the actual markup.

The choice between using Query Selector and Query Selector All for anything other than ID, comes down to what you need in return and where your node is located. If you need the first instance of anything, you can use Query Selector. If you need any other instance of a thing, or a grouping of things, you use Query Selector All. Using standard CSS selectors, we can burrow deep into the DOM tree to retrieve specific items.

Document Query Selector menu, has-children A, gives us the first link inside an element with the class has-children inside the element with the class menu. Document Query Selector All, social nav, A, age ref, equals linkedin.com, gives us any link pointing to LinkedIn inside the element with a class social nav.

And so on. We can also make numerous queries simultaneously using different selectors separated by a comma. So document Query Selector All, menu LI A comma, social nav LI A, gives us all links inside list items inside either the menu or the social nav element as a node list. If you ask me, using the Query Selector and Query Selector All methods is far more efficient and intuitive than the old Get Element By ID, or class name, or tag name methods.

Using CSS selectors just makes sense. Ask for a selector or selectors, get the matching element. It is as simple as that. Just a side note, there are still cases where you might want to use one of the old methods. Specifically if you're working with forms, or if you want your code to be unambiguous. But for most uses, Query Selector, and Query Selector All is the way to go. For a full rundown of these methods, check out the documentation at Mozilla Developer Network.