Post
Ask Question

jQuery Traversing on DOM

Introduction

 
jQuery traversing means how we can find or select the desired elements. Basically, we can perform these things using parent-child relationship, index method, etc. To find the desired elements, we should traverse the DOM.
 
There are several types of traversing methods. Before we move to those methods, we should get some knowledge of DOM.
 

DOM

 
DOM is known as a document object model. When a page is loaded into a browser, the browser creates a DOM of that page. The architecture of DOM is like a tree. The root element is divided into two subcategories: element head and element body. Element head contains header and title information of the page and the element body contains the body part of the page. Using the DOM, we can know the parent and child elements.
 

Types of traversing

 
I have created an HTML page on which I will implement all the traverse methods. The below code is the HTML code using which I will traverse all the jQuery traversing methods. 
  1. <html>  
  2.     <head>  
  3.         <title>Jquery Traversing</title>  
  4.         <style type="text/css">      
  5. .border{border: solid red 1px;padding: 27px;}     
  6. </style>  
  7.     </head>  
  8.     <body>  
  9.         <span>div 1</span>  
  10.         <h6>1</h6>  
  11.         <h5>2</h5>  
  12.         <h4>3</h4>  
  13.         <div class="border" id="div1">  
  14.             <span class="span-border">div 2</span>  
  15.             <div class="border" id="div2">  
  16.                 <span>div 3</span>  
  17.                 <div class="border" id="div3">  
  18.                     <span>div 4</span>  
  19.                     <div class="border" id="div4">  
  20.                         <span>div 5  
  21.                             <span>div 5</span>  
  22.                         </span>  
  23.                         <div class="border" id="div5"></div>  
  24.                     </div>  
  25.                 </div>  
  26.             </div>  
  27.         </div>  
  28.     </body>  
  29. </html>     
Output screen
 
jQuery Traversing on DOM
 
add()
 
Using this method, we can add element, CSS, HTML etc to the selected selector. 
 
Example
  1. $(document).ready(function(){  
  2.    $("h6").add().css({"border": "2px solid blue","border-style":"dotted"});   
  3. });  
Answer
 
In the above example, we have added CSS to the 'h6' element. One border is created on 'h5' element.
 
closest()
 
This method will return all the closest elements of the selectors. 
 
Example
  1. $(document).ready(function(){  
  2.    $("#div2").closest("div").css({"color": "blue"});  
  3. });  
Answer
 
This will change the forecolor of all the closest divs of 'div2'(where div id is 2).
 
contents()
 
This method will return all the elements using the condition. 
 
Example
  1. $(document).ready(function(){  
  2. $("div").contents("span").css({"color": "blue"});  
  3. });  
Answer
 
All spans forecolor will change to blue color inside the div.
 
each()
 
This method will execute on a selector till the matched statement.
 
Example
  1. $("#div4").each(function(){  
  2.     $(this).css({"color": "blue"});  
  3.   });  
Answer
 
The forecolor will change to blue color inside the div4(where div id is div4).
 
has()
 
This method returns all the qualified elements to the 'has' method. 
 
Example
  1. $(document).ready(function(){  
  2.   $("#div4").has("span").css("color", "blue");  
  3. });  
Answer
 
The forecolor will change to blue inside the div4(where div id is div4).
 
is()
 
This is used to check some conditions.
 
Example
  1. $(document).ready(function(){  
  2. if ($("#div4").children().is("span")) {  
  3.       alert("children of div4 is span");   
  4.     }  
  5. });  
Answer
 
This will give an alert "children of div4 is span".
 
last()
 
It will return the last element of the selector.
 
Example
  1. $(document).ready(function(){  
  2.    $("div span").last().css("color", "red");  
  3. });  
Answer
 
Last <span> color will change to red color.
 
Parent()
 
This method will return only the direct parent element of the selectors.
 
Example
  1. $(document).ready(function(){  
  2.   $("#div5").parent().css({"border": "2px solid blue","border-style":"dotted"});  
  3. });  
Answer
 
The border of 'div 4'(where div id is div4) will convert to dotted blue.
 
Parents()
 
This method will return all the parent elements of the selectors.
 
Example
  1. $(document).ready(function(){    
  2.   $("#div3").parents().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });    
Answer
 
All the parent borders of 'div 3'(where div id is div3) will convert to dotted blue.
 
ParentsUntill()
 
This method will return all the parent element between two passed selectors.
 
Example
  1. $(document).ready(function(){  
  2.   $("#div5").parentsUntil("#div2").css({"border": "2px solid blue","border-style":"dotted"});  
  3. });  
Answer
 
The 'div 3' and 'div 4' (where div id is div3 and div4 respectively) will convert to dotted blue.
 
find()
 
This method will return all the descendant elements of the selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("#div3").find("span").css({"color": "cyan"});  
  3. });  
Answer
 
All the child spans text color will convert to 'cyan' color inside 'div3' (where the div id is 'div3').
 
children()
 
This method returns all the direct descendants of the selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("#div4").children().css({"color": "cyan"});  
  3. });  
Answer
 
All the direct children span color will convert to the cyan color of 'div4' (where div id is 'div4').
 
siblings()
 
This method will return all the sibling elements of the selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("#div3").siblings().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border for all the spans (<span>) of 'div3'(where div id is div3) .
 
next()
 
This method will return the only next sibling element of the selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("h6").next().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });   
Answer
 
It will create a border on the next sibling(in <h5> tag) only.
 
nextAll()
 
This method will return all the next sibling element of the selectors.
 
Example
  1. $(document).ready(function(){  
  2.   $("h6").nextAll().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create borders on all the next siblings of the <h6>.
 
nextUntil()
 
This method will return all the sibling elements between two passed selectors. The second parameter should not be the previous sibling of the first passed selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("h6").nextUntil("h4").css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border on <h5>.
 
prev()
 
This will only return the previous sibling element of the selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("h5").prev().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border on <h6> element.
 
prevAll()
 
This will return all the previous sibling elements of the selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("h5").prevAll().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create borders on all previous siblings of <h5>.
 
prevUntil()
 
This method returns all the sibling elements between two passed selectors. The second parameter should be the previous sibling of the first passed selector.
 
Example
  1. $(document).ready(function(){  
  2.   $("h4").prevUntil("h6").css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border on <h5> selector.
 
first()
 
This method will filter the first element from the DOM.
 
Example
  1. $(document).ready(function(){  
  2.   $("span").first().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border in the first span in the DOM.
 
last()
 
This method will filter the last element from the DOM.
 
Example
  1. $(document).ready(function(){  
  2.   $("span").last().css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border in the last span in the DOM.
 
eq()
 
This method will filter the elements using index property. jQuery index starts from 0.
 
Example
  1. $(document).ready(function(){  
  2.   $("span").eq(1).css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border on 'div 5'  because its index is 1.
 
filter()
 
Here we will pass some instructions by which it will return the element from the DOM.
 
Example
  1. $(document).ready(function(){  
  2.   $("span").filter(".span-border").css({"border": "2px solid blue","border-style":"dotted"});    
  3. });  
Answer
 
It will create a border on 'div 2'.
 
not()
 
Here we will pass some instructions, it will return the elements, which don't match to that instruction.
 
Example
  1. $(document).ready(function(){  
  2.   $("span").not(".span-border").css({"border": "2px solid blue","border-style":"dotted"});  
  3. });  
Answer
 
It will create borders on all div except 'div 2'.
 
slice()
 
This method is used to return the statements using the index number. If we will pass a single index number then it will return all the elements available after that also that passed element. If we will pass two index number then it will return all the elements available within that index number. We can pass a maximum of 2 index numbers.
 
Example
  1. $(document).ready(function(){  
  2.    $("span").slice(1).remove();  
  3. });  
Answer
 
It will remove all the <span> element whose index number is 1.  
 

Summary

 
In this session, I discussed jQuery DOM traversing. This session will help to the developers for traversing on DOM using jquery traversing methods. I hope this session will help you. 
 
Thanks for reading this, Happy to help you. 


Similar Articles