DOM Element Methods JQ Home  <<  JQ Basics  <<  DOM Element Methods

In this lesson we look at the four DOM element methods and how we use them within jQuery. These methods allow us to work with the DOM and extract information for processing.

DOM Element Methods Description
.get()Retrieve DOM elements matched by the jQuery object.
.index()Search for a specified element within the matched elements.
.size() **REMOVED**Returns the number of elements in the jQuery object.
.toArray()Return an array of all the DOM elements contained in the jQuery set.

The .get() Method Top

Retrieve DOM elements matched by the jQuery object.

We will be using the .get() signature for our example, which is parameterless and will retrieve the DOM elements matched by the jQuery object.

The other signature .get( index ) will retrieve the DOM element at the specified zero-based index.

Examples of this signature is available in the reference section.

In the example below we select all 'tr' elements within the table with a class of 'testtable' and then change the background colour within the matched set.

Table For Testing The .get() Method
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn1').on('click', function() {
    var $a = $('.testtable tr').get();
    $($a).css('backgroundColor', 'orange');
  });
});

Press the button below to action the above code:

The .index() Method Top

Search for a specified element within the matched elements.

We will be using the .index() signature for our example, which is parameterless and will retrieve the DOM elements matched by the jQuery object.

The second signature .index( element ) will retrieve the position of the first element of the passed element type relative to the original collection.

The third signature .index( selector ) will retrieve the position of the original element relative to the elements matched by the selector.

Examples of both these signatures are available in the reference section.

In the example below when the button is pressed we select the first 'td' element in the table below with a class of 'tdclass' and then alert its index position.

Table For Testing The .index() Method
Table Row 1, Table Data 1 Table Row 1, Table Data 2 (class of tdclass)
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn2').on('click', function() {
    var $a = $('.testtable2 tr .tdclass').index();
    alert('The td element with a class 'tdclass' has index position of: ' 
           + $a + ' within our matched set, relative to its siblings.');
  });
});

Press the button below to action the above code:

The .size() Method **REMOVED**Top

Returns the number of elements in the jQuery object.

The example below no longer works from jQuery 3.0 onwards and is just shown as an example for people using earlier versions.

In the example below we alert the number of table row / table data elements dependant upon button pressed.

Table For Testing The .size() Method
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn3').on('click', function() {
    alert('The table has ' + $('.testtable3 tr').size() 
                           + ' table row elements.');
  });
  $('#btn4').on('click', function() {
    alert('The table has ' + $('.testtable3 td').size() 
                           + ' table data elements.');
  });
});

Press the button below to action the above code:

          

The .toArray() Method Top

Return an array of all the DOM elements contained in the jQuery set.

In the example below we create a JavaScript Array object from the 'table' element below when the left mouse button is clicked. We then use the JavaScript reverse() method to show we can use array methods on our created array on right button click.

Table For Testing The .toArray() Method
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn5').on('click', function() {
    alert($('.testtable4 *').toArray());
  });
  $('#btn6').on('click', function() {
	  alert($('.testtable4 *').toArray()
	                          .reverse());
  });
});

Press the button below to action the above code:

              

Lesson 5 Complete

In this lesson we looked at the four DOM element methods.

Reference

Methods

Attributes and Properties - .css() method
Events - .on() method
DOM Element Methods - .get() method
DOM Element Methods - .index() method
DOM Element Methods - .size() method
DOM Element Methods - .toArray() method