DOM Tree Traversal: jQuery

In this video tutorial presentation we will explain the DOM Tree Traversal using jQuery methods.

The jQuery methods we are using are
parent()
children()
prev()
next()
siblings()
and some examples to show the use of Chain methods.

HTML code
index.html

1
2
3
4
5
6
7
8

 <div id="main">
  <img src="logo.png" />
  <ol>
   <li>Apple</li>
   <li>Oracle</li>
   <li>Microsoft</li>
  </ol> 
</div>

1

 $("ol").parent();

is div with an id main.

1

 $("ol").children();

is, all li. i.e., Apple, Oracle, Microsoft will be displayed.

1

 $("img").parent();

is div with an id main.

1

 $("li").parent().parent();

parent of li is ol and its parent is div tag with an id main.
This is also called as chain method.

Video Tutorial: DOM Tree Traversal: jQuery

How to test these methods:
Looking at our previous day tutorials, write a simple program with some html element structures and take a button.
Clicking on the button, you call each of these methods and see the output.

Keep the programs simple, so that you can first understand the output. Later these simple DOM tree traversal techniques will be very useful while you encounter with some complex application development.