Sunday, May 3, 2020

jQuery DOM Traversing Methods with examples



Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial post, i will be explaining the various DOM traversing methods with examples. So read through carefully and as well ask your questions where necessary.

add( selector ) Method

add( selector ) method adds more elements, matched by the given selector, to the set of the matched elements.

Syntax

Below is the syntax to use this method -

selector.add( selector  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - It could be comma separated list of selectors to select elements to be added.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( ".top" ).add( ".middle" ).addClass( selected );
               } );
          </script>

          <style>
               .selected { color: green; }
          </style>
     </head>

     <body>
          <div>
               <ul>
                    <li  class = "above">list 0</li>
                    <li  class = "top">list 1</li>
                    <li  class = "top">list 2</li>
                    <li  class = "middle">list 3</li>
                    <li  class = "middle">list 4</li>
                    <li  class = "bottom">list 5</li>
                    <li  class = "bottom">list 6</li>
                    <li  class = "below">list 7</li>
               </ul>                  
          </div> 
     </body>
</html>

Output

Below is the output of the above example.


  • list 0
  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6
  • list 7

You can also read our tutorial post on: A Comprehensive Guide to DOM Filter Methods in jQuery


andSelf( ) Method

andSelf( ) method adds the previous selection to the current selection. This method is useful when you have multiple traversals in your script and then adding something that was matched before the last traversal.

Syntax

Below is the syntax to use this method -

selector.andSelf(  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).find( "p" ).andSelf( ).addClass( "border" );
               } );
          </script>

          <style>
               p,   div { margin: 5px;  padding: 5px; }
               .border { border: 2px  solid green; }
               .background { background: yello; }
          </style>
     </head>

     <body>
          <div>
               <p>First Paragraph</p>
               <p>Second Paragraph</p>                  
          </div> 
     </body>
</html>

Output

Below is the output of the above example.

First Paragraph
Second Paragraph





children( [selector] ) Method

The children( [selector] ) method gets a set of elements containing all the unique immediate children of each of the matched set of elements 

Syntax

Below is the syntax to use this method -

selector.children( [selector]  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This is an optional argument to filter out all the children. If not supplied then all the children are selected.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).children( ".selected" ).addClass( "blue" );
               } );
          </script>

          <style>
               .blue { color: blue; }
          </style>
     </head>

     <body>
          <div>
               <span>Hello</span>
               <p  class = "selected">Hello Again</p>
               <div class = "selected">And Again</div>    
               <p  class = "biggest">And One Last Time</p>             
          </div> 
     </body>
</html>

Output

Below is the output of the above example.

Hello

Hello Again

And Again

And One Last Time

You can also read our tutorial post on: An Introduction to jQuery

closest( selector ) Method

closest( selector ) method works by first looking at the current element to see if it matches the specified expression, if so it returns the element itself. If it doesn't match then it will continue to traverse  up all the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found, then none is returned.

Syntax

Below is the syntax to use this method -

selector.closest( selector  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This is the selector to be used to filter the elements.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( document ).bind( "click" ,  function( e )  {
                        $( e.target ).closest( "li" ).toggleClass( "highlight" );
                    } );
               } );
          </script>

          <style>
               .highlight { color: green;  background: yellow; }
          </style>
     </head>

     <body>
          <div>
               <p>Click on the items below to see results:</p>
               
               <ul>
                    <li  class = "top">list 1</li>
                    <li  class = "top">list 2</li>
                    <li  class = "middle">list 3</li>
                    <li  class = "middle">list 4</li>
                    <li  class = "bottom">list 5</li>
                    <li  class = "bottom">list 6</li>
               </ul>                  
          </div> 
     </body>
</html>

Output

Below is the output of the above example.

jQuery Example
Click on the items below to see results:
  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6


contents( ) Method

contents( ) method finds all the child nodes that are inside the matched elements (including text nodes ), or the content document, if the element is an iframe.

Syntax

Below is the syntax to use this method -

selector.contents(  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA. 

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    var  $content =  $( "iframe" ).contents();
                    $content.find( "body" ).append( "I'm in an iframe!" ); 
               } );
          </script>
     </head>

     <body>
          <iframe  src = "https://www.webdesigntutorialz.com"  width = "300"  height = "100"></iframe>                  
     </body>
</html>

Output

Below is the output of the above example.

jQuery Example

You can also read our tutorial post on: Traversing DOM Elements with the help of jQuery

end(  ) Method

The end( ) method reverses the most recent destructive operation, thereby changing the set of matched elements to its previous state right before the destructive operation.

Syntax

Below is the syntax to use this method -

operations.end(   )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA. 

Example

The following example below shows a simple usage of this method. This selects all of the paragraphs, finds span elements inside this, and reverts the selection back to the paragraphs.

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( document ).bind( "click" ,  function( e )  {
                        $( "p" ).find( "span" ).end( ).css( "border" ,  "2px  solid green" );
               } );
          </script>

          <style>
               <p>  {  margin:  10px;   padding:  10px;  }
          </style>
     </head>

     <body>
          <p><span>Hello</span>, how are you?</p>
     </body>
</html>

Output

Below is the output of the above example.

Hello, how are you?




find( selector ) Method

The find( selector ) method searches for the descendant elements that match the specified selector.

Syntax

Below is the syntax to use this method -

selector.find( selector  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - The selector can be written using CSS 1 - 3 selector syntax.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "p" ).find( "span" ).addClass( "selected" );
               } );
          </script>

          <style>
               .selected  {  color: green;  }
          </style>
     </head>

     <body>
          <p><span>Hello</span>, how are you?</p>
          <p>Me? I'm<span>good</span>.</p>
     </body>
</html>

Output

Below is the output of the above example.

Hello, how are you?

Me? I'm good.



You can also read our tutorial post on: Understanding the Basics of jQuery 


next( [selector] ) Method

next( [selector] ) method gets a set of elements containing the unique next siblings  of each of the given set of elements.

Syntax

Below is the syntax to use this method -

selector.next( [selector]  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This optional selector can be written using CSS 1 - 3 selector syntax. If we supply a selector expression, the element is indisputably included as part of the object. If we do not supply one, the element would be tested for a match before it was included.    

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "p" ).next( ".selected" ).addClass( "highlight" );
               } );
          </script>

          <style>
               .highlight  {  background: yellow;  }
          </style>
     </head>

     <body>
          <p>Hello</p>
          <p  class = "selected">Hello Again</p>
          <div><span>And Again</span></div>
     </body>
</html>

Output

Below is the output of the above example.

Hello

Hello Again

And Again

nextAll( [selector] ) Method

nextAll( [selector] ) method finds all the sibling elements after the current element.

Syntax

Below is the syntax to use this method -

selector.nextAll( [selector]  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This optional selector can be written using CSS 1 - 3 selector syntax. If we supply a selector, then result would be filtered out.  

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div:first" ).nextAll(  ).addClass( "highlight" );
               } );
          </script>

          <style>
               .highlight  {  background: yellow;  }
          </style>
     </head>

     <body>
          <div>firs</div>
          <div>Siblings<div>child</div></div>
          <div>Sibling</div>
          <div>Sibling</div>
     </body>
</html>

Output

Below is the output of the above example.

first
Siblings
child
Sibling
Sibling

You can also read our tutorial post on: The IE 4 DOM in JavaScript with examples 

offsetParent(  ) Method

offsetParent( ) method returns the positioned parent(e.g. relative, absolute) of a first selected element.

Syntax

Below is the syntax to use this method -

selector.offsetParent(  )

Parameter Details

Here is the description of all the parameters used by this methods -

  • Na.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "p" ).offsetParent(  ).addClass( "highlight" );
               } );
          </script>

          <style>
               .highlight  {  background: yellow;  }
          </style>
     </head>

     <body>
          <span>Top Element</span>
          <div  style= "position:  relative;">
               <div>Siblings<div>child</div></div>
               <p>Sibling</p>
               <span>Sibling</span>
          </div>
     </body>
</html>

Output

Below is the output of the above example.

Top Element
Siblings
child

Sibling

Sibling



parent( [selector] ) Method

parent( [selector] ) method gets a direct parent of an element. If called on a set of elements, the parent the set of their unique direct parent elements.

Syntax

Below is the syntax to use this method -

selector.parent( [selector] )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This is an optional selector to filter the parent with.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "p" ).parent(  ).addClass( "highlight" );
               } );
          </script>

          <style>
               .highlight  {  background: yellow;  }
          </style>
     </head>

     <body>
          <span>Top Element</span>
          <div>
               <div>Siblings<div>child</div></div>
               <p>Sibling</p>
               <span>Sibling</span>
          </div>
     </body>
</html>

Output

Below is the output of the above example.

Top Element
Siblings
child

Sibling

Sibling


You can also read our tutorial post on: The Legacy DOM in JavaScript 

parents( [selector] ) Method

The parents( [selector] ) method gets a set of elements containing the unique ancestors of the matched set of elements except for the root element.

Syntax

Below is the syntax to use this method -

selector.parents( [selector] )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This is an optional selector to filter the ancestors with.

Example

The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    var  parentEls =  $( "p" ).parents( )

                    .map( function( )  { 
                         return  this.tagName;
                    } ).get( ).join( ",    " );

                   $( "b" ).append( "<strong>"  +   parentEls  +   "</strong>" );
               
               } );
          </script>

     </head>

     <body>
          <span>Top Element</span>
          <div>
               <div  class = "top">Top division 
                    <p  class = "first">First Sibling</p>
                    <span>Second Sibling</span>
                    <p  class = "third">Third Sibling</p>
               </div>
                    <b>Parents of <p> elements are: </b>
          </div>
     </body>
</html>

Output

Below is the output of the above example.

  Top Element
  Top division 

  First Sibling

  Second Sibling

  Third Sibling 

  Parents of DIV, DIV, BODY, HTML

  elements are: DIV, DIV, BODY, HTML


prev( [selector] ) Method
prev( [selector] ) method gets the immidiately preceding sibling of each element in the set of matched elements, optionally been filtered by a selector. 

Syntax
Below is the syntax to use this method -

selector.prev( [selector]  )

Parameter Details
Here is the description of all the parameters used by this methods -

  • selector - The optional selector to filter the previous Element with. 

Example
The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "p" ).prev( ".selected" ).addClass( "highlight" );
               } );
          </script>

          <style>
               .highlight  {  background: yellow;  }
          </style>
     </head>

     <body>
          <div><span>Hello</span></div>
          <p  class = "selected">Hello Again</p>
          <p>And Again</p>
     </body>
</html>

Output
Below is the output of the above example.

Hello

Hello Again

And Again

You can also read our tutorial post on: JavaScript Math Methods 


prevAll( [selector] ) Method
prevAll( [selector] ) method finds all the sibling elements after the current element.

Syntax
Below is the syntax to use this method -

selector.prevAll( [selector]  )

Parameter Details
Here is the description of all the parameters used by this methods -

  • selector - This is the optional selector to filter the previous Element with. 

Example
The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div:last" ).prevAll(  ).addClass( "highlight" );
               } );
          </script>

          <style>
               .highlight  {  background: yellow;  }
          </style>
     </head>

     <body>
          <div>first</div>
          <div>Siblings<div>child</div></div>
          <div>Sibling</div>
          <div>Sibling</div>
     </body>
</html>

Output
Below is the output of the above example.

first
Siblings
child
Sibling
Sibling

siblings( [selector] ) Method
The siblings( [selector] ) method gets a set of elements containing all of the unique siblings of each of the matched set of elements.

Syntax
Below is the syntax to use this method -

selector.siblings( [selector]  )

Parameter Details
Here is the description of all the parameters used by this methods -

  • selector - This is the optional selector to filter the sibling  Elements with. 

Example
The following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "p" ).siblings( ".selected" ).addClass( "highlight" );
               } );
          </script>

          <style>
               .highlight  {  background: yellow;  }
          </style>
     </head>

     <body>
          <div><span>Hello</span></div>
          <p  class = "selected">Hello Again</p>
          <p>And Again</p>
     </body>
</html>

Output
Below is the output of the above example.

Hello

Hello Again

And Again

Alright guys! We have come to the end of this tutorial post on jQuery DOM Traversing Method. In my next tutorial post, i will be talking about CSS Selectors Methods.

Feel free to ask your questions via the comment box below and i will attend to them as soon as possible.

Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment