Game Development Reference
In-Depth Information
Query selectors
There are two different, yet very similar, APIs as part of the new selectors interface.
One selects a collection of elements that match the query used and the other only
matches one. If multiple nodes are matched by a query used in the single selector
version, only the first occurrence is returned.
To use this interface, you call the appropriate function on the document object and
supply a string representing a CSS query. Now you can stop selecting an element
by its ID, then navigating weird sub paths, in order to finally get to the element you
want to target programmatically.
Note
Before this feature was available, it was common for developers to clutter their
document structure with ID and class attributes just to make targeting those ele-
ments programmatically a bit easier. While using CSS expressions to target spe-
cific nodes may be easy enough that you may feel that you no longer need to
add a unique ID or a class to an element just so it's easier to target that element
through code, keep in mind that long CSS expressions might be so complex that
the performance of your application might be compromised because of the time it
takes to navigate to those elements. Remember that the shorter the CSS query,
the easier it is for the browser to match the elements involved.
Consider the following code snippet from the game, where we try to register a click
event listener to the image element found inside a navigation menu holding the game
options:
<nav id="navOptions">
<div>
<p>Difficulty » <span>1</span></p>
<input type="range" step="1" min="1"
max="3" value="1" />
</div>
<img src="img/options-icon.png" />
</nav>
