- Use
document.querySelector()anddocument.querySelectorAll()to find nested nodes - Change value of targeted DOM nodes
One of the most essential skills in our web development toolbox is finding elements in the DOM.
While document.getElementById() and document.getElementsByClassName() are
good, we can improve our search when we use document structure (tag, id,
class) and the tree structure of the DOM. It turns out CSS is a great
language for expressing those relationships! With the following methods we provide
a CSS selector as argument and we get back the collections or specific node
we want.
To practice finding elements in the DOM, we're going to make use of two methods
that are useful for navigating the DOM: document.querySelector() and
document.querySelectorAll().
querySelector() takes one argument, a string of CSS-compatible selectors, and returns
the first element that matches these selectors.
Given a document like
<body>
<div>
Hello!
</div>
<div>
Goodbye!
</div>
</body>If we called document.querySelector('div'), the method would return the first
div (whose content is "Hello!").
Selectors aren't limited to one tag name, though (otherwise why not just use
document.getElementsByTagName('div')[0]?). We can get very specific.
<body>
<div>
<ul class="ranked-list">
<li>1</li>
<li>
<div>
<ul>
<li>2</li>
</ul>
</div>
</li>
<li>3</li>
</ul>
</div>
<div>
<ul class="unranked-list">
<li>6</li>
<li>2</li>
<li>
<div>4</div>
</li>
</ul>
</div>
</body>// get <li>2</li>
const li2 = document.querySelector('ul.ranked-list li ul li')
// get <div>4</div>
const div4 = document.querySelector('ul.unranked-list li div')In the above example, the first query says, "Starting from document (the
object we've called querySelector() on), find a ul with a className of
ranked-list (the . is for className).
Then find an li that is a descendant of that ul. Then find a ul that is a
descendant (but not necessarily a direct child) of that li. Finally, find an
li that is a descendant of that (second) ul."
NOTE: The HTML property class is referred to as className in JavaScript.
What does the second call to querySelector() say? Think about it for a
minute, and then read on.
Wait for it...
The second call says, "Starting from document, find a ul with a
className of unranked-list. Then find an li descended from
ul.unranked-list and a div descended from that li."
Now might be a good time to brush up on selectors if using CSS to target elements isn't feeling natural. Play around on the MDN page, then come back when you're ready.
querySelectorAll works a lot like querySelector() — it accepts a selector
as its argument, and it searches starting from the element that it's called on
(or from document) — but instead of returning the first match, it returns a
NodeList collection (which, remember, is not technically an Array) of
all matching elements.
Given a document like
<main id="app">
<ul class="ranked-list">
<li>1</li>
<li>2</li>
</ul>
<ul class="ranked-list">
<li>10</li>
<li>11</li>
</ul>
</main>If we called
document.getElementById('app').querySelectorAll('ul.ranked-list li')We'd get back a list of Nodes corresponding to: <li>1</li>, <li>2</li>, <li>10</li>, <li>11</li>.
The DOM selection methods document.querySelector() and
document.querySelectorAll() are powerful tools for finding elements we need
to update and change. They use the CSS selector syntax and that helps keep
human brains happy: we only need to learn one selector language. Wasn't that
considerate?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent