In the last chapter, we learned about the MooTools syntax as well as JavaScript best practices. More specifically, we discussed unobtrusive JavaScript and how we should separate our structure (HTML) from our website's behaviors (JavaScript).

In order to successfully and effortlessly write unobtrusive JavaScript, we must have a way to point to the Document Object Model ( DOM) elements that we want to manipulate. The DOM is a representation of objects in our HTML and a way to access and manipulate them. In traditional JavaScript, this involves a lot (like, seriously a lot) of code authoring, and in many instances, a lot of head-banging-against-wall-and-pulling-out-hair as you discover a browser quirk that you must solve.

Let me save you some bumps, bruises, and hair by showing you how to select DOM elements the MooTools way. This chapter will cover how you can utilize MooTools to select/match simple elements (like, "All div elements") up to the most complex and specific elements (like, "All links that are children of a span that has a class of awesomeLink and points to http://superAwesomeSite.com").