For these tutorials, we’re going to be using a pretty standard HTML document with links, images, lists, paragraphs and divs. Download it here, unzip and open it up in your favorite text editor.

You’ll want to be sure you install the Firebug extension for Firefox. Firebug is an extremely powerful plugin that lets you see, edit and espeically debug your javascript live in the browser. It’s also handy for viewing all aspects of your DOM.

Wait, what’s my DOM?
(Other than the point of this article) The DOM is the Document Object Model. It’s how a browser knows what to do with your HTML code. When you open an HTML file in your browser, the browser reads your code and then starts executing it. Each item in the DOM (links, elements like div tags, lists, images, etc) is an object with attributes.

In this example, the <ul> is an object with a set of attributes including it’s visibility, placement within the browser window and the data that the <ul> tag holds inside of it. In this case, the <ul>:

• is visible
• appears after the paragraph, but before the “coolimages” <div>
• can be referred to with an id of “places”
• includes data: the 4 <li> objects including their attributes and data

If you were targetting this <ul> in CSS, you would most likely refer to it as ul#places.

The next tutorial will be about selecting your items using jQuery. Using the sample HTML you downloaded above:

• How would you select the second paragraph?
• How would you select the unordered list?
• How would you select the second image?
• How would you select the third item list?
• How would you select the “click here” text?