~3 min read|
NB: The below illustrations are inspired / adapted from MDN’s great page on QuerySelector. I did not come up with these examples (though I modified them slightly for my understanding). That said, I hope to that conversation by contributing some additional context for how I think about
querySelector now. Per MDN, the syntax for
elementList = parentNode.querySelectorAll(selectors);
While I’d used
querySelector from time to time, recently I realized how much more powerful it was than the simplistic way in which I’d been using it. That realization was a product of the fact that I finally recognized that the argument (
selectors) were really just strings for how you apply style with CSS.
When people say it’s helpful to have a strong foundation in HTML and CSS to be a front end engineer, this is what they’re talking about.
Here’s a short video I recorded touching on some of the basics and chaining I describe in more detail below.
Let’s take a quick step back and just think about some basics.
When I first started using
querySelector it was to pick out individual tags in HTML and then go from there.
A basic example is to select the first or all paragraph tags on a page.
let paragraphs = document.querySelectorAll("p").
But, what if you wanted more specificity?
Recall that CSS class selectors use dot notation (e.g.,
.intro for elements with
class="intro"). The querySelector method uses the same notation.
So, if you are comfortable with styling CSS like so …
… Then you can select all of the elements to which that style is applied in the same way. For example:
let divNotes = document.querySelectorAll("div.notes").
This will return all
<div> elements with a class name of
notes while not returning other tags (e.g.,
<p> ) with a class of
Another way to use the query selector is to chain them together. Since
querySelector returns a
NodeList, which is the same thing we’re querying
let container = document.querySelector("#main");
let matches = container.querySelectorAll("div.highlighted .
paragraph elements where the immediate parent is a
div with the class name of
highlighted and within the container defined by the id,
Libraries like jQuery make DOM selection and manipulation significantly easier. But my issue was not that I didn’t know how to use jQuery, but that I didn’t know the range of options available to me because of a missing piece in how these tools work.
When I realized that I could be much more specific in my queries and chain them together, a whole new world of possibilities opened up. Hopefully this helps you too.
Here’s to learning.
Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!