jQuery .toArray() Method

What You’ll Learn

The .toArray() method turns a jQuery collection into a plain JavaScript Array of DOM elements. This tutorial covers the official demos, using native Array methods like .reverse() and .map(), comparisons with .get(), empty selections, five examples, and try-it labs.

Introduction

A jQuery object is array-like — it has a .length and numeric indexes — but it is not a real JavaScript Array. That means some Array methods are missing or behave differently.

Since jQuery 1.4, .toArray() bridges that gap: it returns every matched DOM element in a standard array so you can call .reverse(), .map(), .filter(), for…of, or hand the list to another library.

The nodes are the same live elements in the document (not clones). Pair this topic with collection helpers like .size() / .length, and browse the jQuery DOM hub for related methods.

Understanding the .toArray() Method

.toArray() copies the matched set into a new Array instance. Each entry is a raw DOM element. Order matches the jQuery collection (typically document order).

After conversion you leave the jQuery chaining world. To call jQuery methods again on one item, wrap it: $(nodes[0]).addClass("x"). Or wrap the whole array: $(nodes).

📝 Syntax

Signature (jQuery 1.4+):

.toArray()

Parameters

• None — this method does not accept any arguments.

Return value

• Array — all elements in the jQuery set as native DOM nodes.

Typical pattern

var nodes = $( "li" ).toArray();
console.log( nodes.length );
console.log( nodes[0].tagName ); // "LI"

Examples Gallery

Examples follow the official jQuery API and everyday Array workflows. Use View Output or Try It Yourself to explore each case.

alert( $( "li" ).toArray() );

[object HTMLLIElement],[object HTMLLIElement],…

A native Array of the matched <li> DOM nodes

function disp( divs ) {
  var a = [];
  for ( var i = 0; i < divs.length; i++ ) {
    a.push( divs[ i ].innerHTML );
  }
  $( "span" ).text( a.join( " " ) );
}

disp( $( "div" ).toArray().reverse() );

Reversed - Three Two One

Native .reverse() works because toArray() returned a real Array

var labels = $( "li" ).toArray().map(function ( el ) {
  return el.textContent.trim();
});
$( "#out" ).text( labels.join( " | " ) );

Alpha | Beta | Gamma

Native map runs on DOM elements from toArray()

var nodes = $( "#does-not-exist" ).toArray();
console.log( Array.isArray( nodes ) ); // true
console.log( nodes.length );           // 0

Array.isArray: true
length: 0

Never null — always an Array

var a = $( "li" ).toArray();
var b = $( "li" ).get();
var first = $( "li" ).get( 0 );

console.log( a.length === b.length ); // true
console.log( first.tagName );         // "LI"

toArray length === get() length: true
.first tagName: LI

Use .toArray() for clarity; .get(i) for one node

🚀 Common Use Cases

• Array pipelines — reverse, sort, map, or filter matched elements with native methods.
• Interop — pass DOM nodes to libraries that expect a real Array.
• Debugging — inspect the matched set as a plain list in the console.
• Custom loops — for…of or indexed for over DOM elements.
• Partial extraction — convert, then take a slice of nodes for a batch update.
• Readable intent — prefer .toArray() over .get() when the goal is clearly “become an Array.”

📝 Notes

• Available since jQuery 1.4; still present in modern jQuery 3.x / 4.x.
• Returns an Array of DOM elements — not jQuery objects.
• Does not clone nodes; array entries are live element references.
• Empty selections return [].
• .get() with no arguments is effectively the same dump to an array.
• Reversing the array does not reorder the DOM unless you move nodes yourself.
• Modern alternative: Array.from($("li")) or [...$("li")] in environments that support them — .toArray() remains the clearest jQuery API.

💡 Best Practices