Tag Archives: traversal

Episode 8: Parents and Children

Parents and Children

While the title of this week’s video might sound like some sort of family therapy session, we’re actually going to be digging into a few of our methods for traversing the DOM – moving up the DOM with parent() or parents() and then moving down the DOM with children() or find().

There’s a lot of confusion and misunderstanding around these methods, so this week’s episode helps to clear that up. We start out with a document with lots of nested divs, each with a different background color just to make them easy to see.

First up, we take a look at parent() and parents(). The parent() method selects only one element – the direct parent element of the element we started from. The parents() method, on the other hand, will select all parent elements, including the <body> and the <html> elements.

But, with either the parent() or parents() methods, we’re able to add a selector and refine the selection that gets made. With the parent() method, that would select the parent element only in the event that it matches the selector. With the parents() method, you can filter out the elements that get selected – rather than selecting every single parent element all the way up to the <html> element, we can say exactly which elements should get selected.

Now that we understand parent() and parents(), let’s take a look at the differences between children() and find(). First up, the find() method requires a selector. If we need to select all the children elements nested inside the element we started from, then we can pass the universal selector (*) to the find() method, like this: find('*')

The children() method, on the other hand gets just the direct children. That throws a lot of people off, since it seems backwards. If we have parent() and parents(), shouldn’t we also have child() and children()?

But working our way up the DOM isn’t the same as working our way down. When we’re searching through ancestors, each element can have only one direct parent element. When we’re searching through descendants, each element could have 0, 1, or many direct children, plus additional descendants nested inside those children.

Just like with parents(), we can also pass a selector to children() to select only those direct children that match the selector rather than all of the direct children.

After working with our many nested divs page, we’ll take a look at a more real-world example – we have a block of content inside a div, with one paragraph that happens to be wrapped in a blockquote. Using our children() and find() methods, we see the difference between them quite clearly. Using the children() method, the paragraph inside the blockquote isn’t selected. But when we switch over to the find() method, we’re able to select that paragraph along with the others.

That’s a pretty good look into parent(), parents(), find(), and children(). Have fun experimenting with those methods to make sure you really understand the differences and next week we’ll take a look at adding animation to Simple Tabs example to make those tabs extra special.

Episode 5: Traversing the DOM

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.