Learn jQuery: Traversing the DOM

In this course, you will learn about jQuery methods that allow you to access elements in the DOM, based on their relative position.

Start[missing "en.views.course_landing_page.learn-jquery.course_illustration" translation]

Key Concepts

Review core concepts you need to learn to master this subject

jQuery children

<div class="parent"> <div class="item">Child 1</div> <div class="item">Child 2</div> <div class="item">Child 3</div> </div>

The jQuery .children() method returns all child elements of a selected parent element.

This method only applies to the direct children of the parent element, and not deeper descendents.

In the example code, $('.parent').children() would select all the .item elements.

jQuery .parent

<div class="parent"> <div class="item">Child 1</div> <div class="item">Child 2</div> <div class="item">Child 3</div> </div>

The jQuery .parent() method returns the parent element of a jQuery object.

jQuery .siblings

<div class="parent"> <div class="item">Child 1</div> <div class="item">Child 2</div> <div class="item">Child 3</div> </div>

The jQuery .siblings() method targets all of the sibling elements of a particular element.

.siblings() can be used to add a selected class to an element on click and remove it from all of its sibling elements, ensuring that only one element appears as "selected" at one time.

jQuery .closest

<div class="parent"> <div class="item">Child 1</div> <div class="item">Child 2</div> <div class="item">Child 3</div> </div>

The jQuery .closest() method travels up through the DOM tree to find the first (and closest) ancestor element matching a selector string.

jQuery .next

<div class="parent"> <div class="item">Child 1</div> <div class="item">Child 2</div> <div class="item">Child 3</div> </div>

The jQuery .next() method targets the next element that shares the same parent element as the original element.

In the following HTML code, the element returned by $('.two').next() would be <li class="three">Item three</li>.

jQuery .find()

<div class="parent"> <div class="item">Child 1</div> <div class="item">Child 2</div> <div class="item">Child 3</div> </div>

In jQuery, the .find() method will find and return all descendent elements that match the selector provided as an argument.

This code block shows a snippet of HTML that has a simple shopping list. Using jQuery, the list items inside the shopping list can be selected. The listItems variable will be a jQuery object that contains the two list items from the shopping list.

Traversing the DOM
Lesson 1 of 1
  1. 1

    jQuery makes it easy to target HTML elements by tag name, class, and id. We can also dynamically target a single element in a given class by accessing an event's [...] attribute. In this lesson, ...

  2. 2

    According to the DOM tree, the outermost element is the parent of all elements inside of it. Therefore, the HTML elements inside of the outer element are children. The jQuery [...] method all...

  3. 3

    In addition to the [...] method we covered in the last exercise, there are two methods you can use to select the parent and siblings of an element. [...] In the example above, the [...] meth...

  4. 4

    To select an element close to the current element, we can use jQuery's [...] method. The [...] method will travel up the DOM tree to find a specified selector closest to it. Its syntax looks l...

  5. 5

    Sometimes you don't want to target all the siblings of an element — you just want to target the next one. That's where the aptly-named [...] method comes in! The code below is HTML for a ...

  6. 6

    Sometimes we want to target an element that lives inside another, but we don't want to use the [...] method, since that might target more elements than we need. That's where the [...] method co...

  7. 7

    Understanding how elements relate to each other in the DOM makes it easy to efficiently select elements. We have covered several methods in this lesson including: - [...] to target an element's...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Learn jQuery: Traversing the DOM

Start[missing "en.views.course_landing_page.learn-jquery.course_illustration" translation]