Access DOM Element from jQuery Using Index

This guide explains how to extract native DOM elements from a jQuery selection using zero-based indexing. A jQuery object acts as an array-like wrapper around one or more native HTML DOM nodes. To utilize native JavaScript properties and methods that jQuery does not support, you must unwrap the element by referencing its position in the collection.

Method 1: Using Square Bracket Notation

The simplest and fastest way to retrieve the raw DOM element is by using standard JavaScript array indexing notation ([index]).

// Select the element and get the first native DOM node
const nativeElement = $('.my-class')[0];

// Use a native DOM property or method
nativeElement.focus();

Because jQuery objects are array-like structures containing the matched DOM nodes, passing index 0 accesses the first node, index 1 accesses the second, and so on. If the selector finds no matches, accessing an index will return undefined.

Method 2: Using the .get() Method

jQuery provides a built-in method called .get() specifically designed to access the underlying DOM elements.

// Retrieve the first matched DOM element
const nativeElement = $('.my-class').get(0);

// Call a native method, such as playing media
nativeElement.play();

While both methods return the exact same native DOM node, .get() provides the added benefit of supporting negative integers. Passing a negative index counts backward from the end of the collection:

// Retrieve the last native element in the matched set
const lastElement = $('.my-class').get(-1);

When to Access the Native Element

Extracting the native DOM element is necessary whenever you need to interact with native HTML5 APIs or properties that jQuery does not wrap, such as:

  • Accessing native media controls on <video> or <audio> elements (e.g., .play(), .pause()).
  • Reading native form validation properties (e.g., .checkValidity()).
  • Accessing canvas drawing contexts (canvas.getContext('2d')).
  • Interacting with third-party libraries that require raw DOM nodes rather than jQuery instances.