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.

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

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

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

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

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.

jQuery DOM Traversing Methods with examples

add( selector ) Method

Syntax

Parameter Details

Example

Output

andSelf( ) Method

Syntax

Parameter Details

Example

Output

children( [selector] ) Method

Syntax

Parameter Details

Example

Output

closest( selector ) Method

Syntax

Parameter Details

Example

Output

contents( ) Method

Syntax

Parameter Details

Example

Output

end( ) Method

Syntax

Parameter Details

Example

Output

find( selector ) Method

Syntax

Parameter Details

Example

Output

next( [selector] ) Method

Syntax

Parameter Details

Example

Output

nextAll( [selector] ) Method

Syntax

Parameter Details

Example

Output

offsetParent( ) Method

Syntax

Parameter Details

Example

Output

parent( [selector] ) Method

Syntax

Parameter Details

Example

Output

parents( [selector] ) Method

Syntax

Parameter Details

Example

Output

prev( [selector] ) Method

Syntax

Parameter Details

Example

Output

prevAll( [selector] ) Method

Syntax

Parameter Details

Example

Output

siblings( [selector] ) Method

Syntax

Parameter Details

Example

Output

Post a Comment

Get new posts by email: