In This Chapter
• Learn how to find elements in the DOM
• Use the CSS selector syntax for cleverer element discovery
As you saw in previous chapter, your DOM is nothing more than a tree-like structure made up of all the elements that exist in your HTML document:
That detail is only sort of important. What is important is that you have all of these HTML elements floating around that you want to access and read data from or modify. There are many ways to find these HTML elements. After all, these elements are arranged in a tree-like structure, and if there is one thing computer scientists like to do, it is figuring out crazy ways to run up and down a tree to find something.
I won’t subject you to that torture...just yet. In this chapter, you are going to learn how to use two built-in functions called querySelector
and querySelectorAll
to solve a good chunk of all your DOM searching needs.
Onwards!
To help explain the awesomeness that querySelector
and querySelectorAll
bring to the table, take a look at the following HTML:
<div id="main">
<div class="pictureContainer">
<img class="theImage" src="smiley.png" height="300"
width="150" />
</div>
<div class="pictureContainer">
<img class="theImage" src="tongue.png" height="300"
width="150" />
</div>
<div class="pictureContainer">
<img class="theImage" src="meh.png" height="300"
width="150" />
</div>
<div class="pictureContainer">
<img class="theImage" src="sad.png" height="300"
width="150" />
</div>
</div>
In this example, you have one div
with an id
of main, and then you have four div
and img
elements each with a class value of pictureContainer and theImage respectively. In the next few sections, we’ll set the querySelector
and querySelectorAll
functions loose on this HTML and see what happens.
The querySelector
function basically works as follows:
var element = document.querySelector("CSS selector");
The querySelector
function takes an argument, and this argument is a CSS selector for the element you wish to find. What gets returned by querySelector
is the first element it finds—even if other elements exist—that could get targeted by the selector. This function is pretty stubborn like that.
Taking the HTML from our earlier example, if we wanted to access the div
whose id
is main, you would write the following:
var element = document.querySelector("#main");
Because main is the id
, the selector syntax for targeting it would be #main
. Similarly, let’s specify the selector for the pictureContainer class:
var element = document.querySelector(".pictureContainer");
What gets returned is the first div
whose class value is pictureContainer. The other div
elements with the class value of pictureContainer will simply be ignored.
The selector syntax is not modified or made special because you are in JavaScript. The exact syntax you would use for selectors in your stylesheet or style region can be used!
The querySelectorAll
function returns all elements it finds that match whatever selector you provide:
var element = document.querySelectorAll("CSS selector");
With the exception of the number of elements returned, everything I described about querySelector
above applies to querySelectorAll
as well. That important detail changes how you end up actually using the querySelectorAll
function. What gets returned is not a single element. Instead, what gets returned is an array-like container of elements!
Continuing to use the HTML from earlier, here is what our JavaScript would look like if we wanted to use querySelectorAll
to help us display the src
attribute of all the img
elements that contain the class value theimage:
var images = document.querySelectorAll(".theImage");
for (var i = 0; i < images.length; i++) {
var image = images[i];
alert(image.getAttribute("src"));
}
See? This is pretty straightforward. The only thing you need to do is remember how to work with Arrays (Chapter 13, “When Primitives Behave Like Objects”). The one weird thing is the mysterious getAttribute
function. If you aren’t familiar with getAttribute
and how to read values from elements, that’s totally okay. We’ll look at all that really soon.
The thing that surprised me when I first used querySelector
and querySelectorAll
is that it actually takes the full range of CSS selector syntax variations as its argument. You don’t have to keep it simple like I’ve shown you so far.
If you wanted to target all of the img
elements without having to specify the class value, here is what our querySelectorAll
call could look like:
var images = document.querySelectorAll("img");
If you wanted to target only the image whose src
attribute is set to meh.png, you can do the following:
var images = document.querySelectorAll("img[src='meh.png']");
Note that I just specified an attribute selector1 as my argument to querySelectorAll
. Pretty much any complex expression you can specify for a selector in your CSS document is fair game for specifying as an argument to either querySelector
or querySelectorAll
.
1. http://bit.ly/kirupaAttribute
There are some caveats that you should be aware of:
• Not all pseudo-class selectors are allowed. A selector made up of :visited
or :link
is ignored and no elements are found.
• How crazy you can get with the selectors you provide depends on the browser’s CSS support. Internet Explorer 8 supports querySelector
and querySelectorAll
. It doesn’t support CSS3. Given that situation, using anything more recent than the selectors defined in CSS 2 will not work when used with querySelector
and querySelectorAll
on IE8. Chances are, this doesn’t apply to you because you are probably supporting more recent versions of browsers where this IE8 issue isn’t even on the radar.
• The selector you specify only applies to the descendants of the starting element you are beginning your search from. The starting element itself is not included. Not all querySelector
and querySelectorAll
calls need to be made from a document
.
Just a quick reminder for those of you reading these words in the print or e-book edition of this book: If you go to www.quepublishing.com and register this book, you can receive free access to an online Web Edition that not only contains the complete text of this book but also features a short, fun interactive quiz to test your understanding of the chapter you just read.
If you’re reading these words in the Web Edition already and want to try your hand at the quiz, then you’re in luck – all you need to do is scroll down!