Traversing the DOM

“Traversing the DOM” sounds kind of scary, but it’s just developer-speak for moving from one place in an HTML document to another. In this video, we’ll take a look at some of the methods jQuery provides for easily moving around.

Here, we’ll get started with a bunch of nested unordered lists so that we can learn how to move around from one list item to another. We’ll use jQuery’s addClass() method to add classes to the starting point and ending point(s) so that we can see how we’re moving around the document.

We’ll take a look at using the following methods:

• next()
• nextAll()
• prev()
• prevAll()
• parent()
• parents()
• children()
• find()
• siblings()

In addition to those traversal methods, we’ll also look at how to use:

• addClass()
• first()

Learning how to move around an HTML document is a powerful tool to have in your toolbox. Once you’ve arrived at your endpoint, you can call any of jQuery’s methods to hide, show, animate, change CSS class names, replace content, etc. You’ll find that these methods are so universally helpful, that we’ll put them to work in nearly every tutorial we do.

As an example of how to put these methods to work, take a look at last week’s video on creating simple tabs without using a jQuery plugin.