(^248) ❘ CHAPTER 9 PLUGINS
Inspecting the Document Object Model
In traditional JavaScript, HTML element objects have always had some built-in properties and
methods. These properties and methods make it possible to interact with and manipulate the DOM.
jQuery sits in the middle, between traditional JavaScript’s built-in DOM and the API it provides
for interacting with that DOM. As you’ve already learned, jQuery simplifi es the amount of code
you have to write to query and manipulate the DOM. Most of the methods jQuery provides have
an analogue in the traditional JavaScript DOM API. Some of the methods you’re likely to fi nd in
the traditional DOM are methods like appendChild(), which adds a new child element or text node
just after the last element or text node. Another is getAttribute(), which returns the value of an
attribute. In the context of these two examples, jQuery provides similar methods. Instead of append-
Child(), you get a whole spectrum of methods for element placement and DOM manipulation such
as after(), insertAfter(), before(), insertBefore(), and all the other methods I introduced to you
in Chapter 4, “Manipulating Content and Attributes.”Instead of getAttribute(), setAttribute(), or hasAttributes(), you have attr() and a whole
spectrum of CSS attribute selectors. You’ll note, however, that the concept of a jQuery plugin builds
on the concept of the DOM and the properties and methods that it exposes for working with an
element. jQuery plugins extend what you can do with an element and make it possible to defi ne
completely custom methods.In Example 9-2, you tweak what you saw in Example 9-1, using traditional JavaScript. You exam-
ine what properties and methods are attached to the <a> element in the HTML document.You start with this XHTML 5 document:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<title>John Candy Movies</title>
<script type='text/javascript' src='Example 9-2.js'></script>
<link type='text/css' href='Example 9-2.css' rel='stylesheet' />
</head>
<body>
<h2>John Candy Movies</h2>
<ul class='movieList'>
<li>The Great Outdoors</li>
<li>Uncle Buck</li>
<li>Who’s Harry Crumb?</li>
<li>Canadian Bacon</li>
<li>Home Alone</li>
<li>Spaceballs</li>
<li>Planes, Trains, and Automobiles</li>
</ul>
<p>
<a href='javascript:void(0);' id='movieSelectAll'>Select All</a>
</p>
</body>
</html>