Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why use jQuery(selector).get(0) instead of jQuery(selector)[0] to get DOM element?

Tags:

Using jQuery is there any benefit to using $(selector).get(0) over $(selector)[0] if I just want to get the first item in the jQuery array as a DOM element?

HTML:

<form id="myForm"></form>

Javascript:

var selector = '#myForm';
var domElement = $(selector).get(0); //Returns [object HTMLFormElement]

//Or
var domElement = $(selector)[0]; //Also returns [object HTMLFormElement]
  • .get() is more characters to type.
  • Both methods return the same result if the $(selector) is empty (undefined)
  • The jQuery documentation on .get() notes that you can simply use the index accessor to get the nth element, but you don't get the other benefits of .get() such as using a negative number to return items from the end of the array.
  • Also, you can call .get() with no arguments to return all the DOM elements of the jQuery array.
like image 901
Aaron Blenkush Avatar asked Jan 24 '13 15:01

Aaron Blenkush


People also ask

Is jQuery better than DOM?

Pure JavaScript can be faster for DOM selection/manipulation than jQuery as JavaScript is directly processed by the browser. jQuery has to be converted into JavaScript to make it run in a browser. All these can be done in JavaScript but we may have to write many lines of code.

Is jQuery faster than DOM?

jQuery is a wrapper that normalizes DOM manipulation in a way that works consistently in every major browser. It's fully reasonable for it to perform 25x slower than direct DOM manipulation. The performance loss is a tradeoff to have concise code.

Is it possible to access the underlying DOM element using jQuery?

The Document Object Model (DOM) elements are something like a DIV, HTML, BODY element on the HTML page. A jQuery Selector is used to select one or more HTML elements using jQuery. Mostly we use Selectors for accessing the DOM elements.

Why does jQuery or a DOM method such as getElementById not find the element?

At the moment the script is executed, the element does not exist yet and getElementById will return null . The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.


2 Answers

.get allows you to use negative indices. For example:

<span>1</span>
<span>2</span>
<span>3</span>

$("span").get(-1); refers to the third span.

But if you don't need that feature and only want to select one element .get(0) and [0] are the same. Notice the this[num]:

// jQuery code
get: function (num) {
    return num == null ?

    // Return a 'clean' array
    this.toArray() :

    // Return just the object
    (num < 0 ? this[this.length + num] : this[num]);
},
like image 186
Matt Zeunert Avatar answered Sep 30 '22 16:09

Matt Zeunert


I have too low a rep to comment on ericbowden's answer, but here is a jsperf test comparing the two operations:

http://jsperf.com/selector-get-0-vs-selector-0

Consensus (on Chrome 32): Basically the same, very minor advantage towards [0]

like image 35
mtoor Avatar answered Sep 30 '22 17:09

mtoor