13

What is the difference between the object returned by $('#elementID') and the object returned by document.getElementById('elementID')?

Moreover, how can you easily convert from one to the other? For instance:

$('a').each(function(){
    // How can I access 'this' as a pure javascript object instead of as a jQuery object?
});

This has plagued me for some time now. I know you shouldn't mix the two, really, but I just want to understand the principle.

temporary_user_name
  • 35,956
  • 47
  • 141
  • 220
  • 2
    Just pass it into the `$` constructor: `$(document.getElementById('id'))`. To get the DOM object back out, use `.get()` or `[0]`. – Blender Oct 12 '13 at 23:06
  • You should make that an answer with clear examples :) – temporary_user_name Oct 12 '13 at 23:06
  • @Aerovistae homework? :) –  Oct 12 '13 at 23:07
  • LOL actually no. Does it smack of academic origins? No, this is to resolve my slowness in knowing how to combine jQuery with regular JS when writing practical code. – temporary_user_name Oct 12 '13 at 23:10
  • Under the hood, a jQuery object is an array of DOM elements, such as those you'd get using `getElementById()` (in combination with other `getElementByWhatever()` methods and whatever else Sizzle, the selector engine does), that has a bunch of methods attached to it. – millimoose Oct 12 '13 at 23:13
  • 4
    Regarding your `$.each` question: `this` in that case will be a regular DOM node, not a jquery object. – bfavaretto Oct 12 '13 at 23:34
  • possible duplicate of [document.getElementById vs jQuery $()](http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery) – bfavaretto Oct 12 '13 at 23:35
  • 3
    Can I just chime in and emphasize what @bfavaretto said? There is no need for conversion inside the `each` block. Just use either `this` to access the DOM object or `$(this)` to access the jQuery object. – Ingo Bürk Oct 12 '13 at 23:49

4 Answers4

28

What is the difference between the object returned by $('#elementID') and the object returned by document.getElementById('elementID')?

$('#elementID') returns an object with a ton of functions that all operate on the result of document.getElementById('elementID'). Think of the jQuery object like a giant robot that document.getElementById('elementID') is sitting inside of.

You can access the wrapped DOM object with:

  • $('#elementID').get()
  • $('#elementID').get(0)
  • $('#elementID')[0]

If there's more than one element matched by the selector, you can access, for example, the second element with $elements.get(1) or $elements[1].

Moreover, how can you easily convert from one to the other?

To wrap an object with jQuery's convenience functions, just pass it into the $ function:

$(document.getElementById('foo'))
$(document.querySelectorAll('.foo:not(.bar)'))

To go the other way, use .get() or the bracket notation.

In your specific example, you don't need to do anything special because this is actually a normal DOM object. This is why you often see callbacks littered with $(this).

Blender
  • 289,723
  • 53
  • 439
  • 496
  • I don't think there's a need for the first 2 paragraphs of this answer. To me the OP clearly shows that he understands that a jQuery object is a wrapper around DOM nodes. He just wants to understand how and how to convert between them. A simple, straightforward answer would be better not only for the OP but also for future "duplicate questions" which may be redirected to this answer. Apart from that, good answer and a very complete explanation. – slebetman Oct 12 '13 at 23:39
  • @slebetman The OP (to me, very clearly) asks two questions in the body of his post. This answer actually quotes (and subsequently answers) both. I don't think your objection holds water. – millimoose Oct 13 '13 at 00:40
  • 1
    @millimoose: The first two paragraphs have been deleted. The original first two paragraphs explains that jQuery is not magic and is written in javascript and is a wrapper around DOM objects. I think the OP understands that. The current first 2 paragraphs is OK by me. – slebetman Oct 13 '13 at 00:59
6

A jquery object is just an array with special functions

// non-jquery -> jquery
var a = document.getElementById('some-link'); // one element
var $a = $(a);

// jquery -> non-jquery
a = $a[0]; // a jquery element holds all of its matches in the indices 0..(a.length) just like a  JS array
Stefan
  • 3,962
  • 4
  • 34
  • 39
0

Jquery objects contain both properties that describe the object and methods(functions) to interact with that object

btm1
  • 3,866
  • 2
  • 23
  • 26
0

I have used the following code for creating a simple javascript element array but some cases i found i need to use the same element as jQuery object. then i found following solution to do it.

var cboxes = document.getElementsByName('deletecheck');
var len = cboxes.length;
for (var i=0; i<len; i++) {
    if (cboxes[i].checked){
            jQuery(cboxes[i]).parent().parent().remove();
    }
}
Sapnandu
  • 620
  • 7
  • 9