That detail is only sort of important 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 elments. After all, these elements are arranged in a tree-like structure, and if there is one thing computer scientists like to do is figure out crazy ways to run up and down a tree to find something. Meet the querySelector Family To help explain the awesomeness that querySelector and querySelectorAll bring to the table, take a look at the following HTML:

<div class="pictureContainer"> <div id="main"> <div class="pictureContainer"> <img class="theimage" src="smiley.png" height="300" width="150"/> </div> <img class="theimage" src="tongue.png" height="300" width="150"/> <img class="theimage" src="meh.png" height="300" width="150"/> <img class="theimage" src="sad.png" height="300" width="150"/> 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.

QuerySelector 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 are wanting 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 me 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!

QuerySelectorAll The querySelectorAll function returns all elements it finds that match whatever selector you provide: var elements = 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 of elements! Continuing to use the HTML from above, 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, pretty straightforward. The only thing you need to do is remember how to work with Arrays. If you aren't familiar with getAttribute and how to read values from elements, that's something we'll look at really soon.

It Really is the CSS Selector Syntax 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 Selector 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. 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 go 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. 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.

What about getElementById, getElementsByTagName, getElementsByClassName? The querySelector and querySelectorAll functions are the new kids on the block. The past was dominated by the getElementById, getElementsByTagName, and getElementsByClassName functions that pretty much did exactly as their names describe. You may still see these functions used in older books, tutorials, and snippets online. In general, you should just use querySelector and querySelectorAll. These two functions are easier to use and far more powerful than what you could do with the getElement* functions. Like a wise person once said, life is too short to spend time learning about old JavaScript functions.