12

I have a program that assigns a variable as:

var theList = document.getElementById('theList');

it uses jquery, but if I write it like this:

var theList = $('#theList');

the function that uses that variable doesn't work.

What is the distinction between a jquery selector and using getElementById?

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
user1469779
  • 2,541
  • 4
  • 18
  • 21

5 Answers5

18

document.getElementById returns a native DOM Element object, with direct access to that node's properties.

jQuery functions instead return "jQuery collections", i.e a jQuery object with an associated set of functions / plugins, etc that acts like an array of DOM nodes.

A common convention used to tell the former from the latter is to prefix variables containing the latter with $:

To extract the individual elements from a jQuery collection as DOM nodes, either use .get(n) or [n].

var $theList = $('#theList');   // jQuery collection
var theList = $theList[0];      // DOM node
var theList = $theList.get(0);  // also a DOM node

Attribute and property access depends on whether you have a jQuery collection or not:

var id = $theList.attr('id');   // jQuery function
var id = theList.id;            // native property
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • After searching "DOM element vs jQuery object" I came across this http://stackoverflow.com/questions/6974582/jquery-object-and-dom-element and determined that the jquery equivalent of var theList = document.getElementById('theList'); would be var theList = $('#theList').get(0); – user1469779 Apr 02 '13 at 13:18
  • @user1469779 yes, that says much the same. – Alnitak Apr 02 '13 at 13:18
  • Exactly the code I gave in my question to do the conversion. Good to see you managed to do an edit to include the conversion process. – TheManWithNoName Apr 02 '13 at 13:23
1

The first theList is a DOM element; the second theList (which would ideally be written as $theList) is a jQuery object. Your function is apparently expecting the former and not the latter.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
0

That's because $('#theList') returns a JQuery Object, not a DOM Object. JQuery objects do not have the same methods & properties as a Javascript Element/Node might.

Ben Yep
  • 102
  • 9
0

getElementById function returns first element with given id where jquery selector returns object known as the "wrapped set". You can use each function to iterate through it and call your function.

See this article: http://www.devx.com/codemag/Article/40923.

Piotr
  • 116
  • 2
-1

The standard getElementByID function returns a JavaScript reference to the DOM element, whereas the jQuery function returns a jQuery object (which contains an array-like structure of references to zero or more JavaScript references to DOM elements).

To make them compatible you can use:

var theList = $('#theList').get(0);

NB: Edited to help keep world peace and correct my hastily typed terminology that commenters were quick to point out.

TheManWithNoName
  • 699
  • 5
  • 6
  • no, it's really not "an array of jQuery objects". It's a single jQuery object with a set of numerically indexed properties representing the individual DOM elements within that collection. – Alnitak Apr 02 '13 at 13:13
  • It's not a "JavaScript object", it's a DOM element. jQuery doesn't produce an array, although it's [array-like](http://stackoverflow.com/a/11886626/497418). – zzzzBov Apr 02 '13 at 13:13
  • Depends how you look at it.. a jQuery object contains a list structure of individual objects or refers to a single jQuery object if only one item is returned by the selector. If you do jQuery('.everything') you get not one object but a list of objects. – TheManWithNoName Apr 02 '13 at 13:14
  • No, it's not how you look at it. Arrays are produced via array literals (`[]`), or the `Array` constructor function. Everything else is *not* an array. Yes, it may be a collection, but `array != collection`. – zzzzBov Apr 02 '13 at 13:16
  • yes, but those "objects" are "native DOM elements", not "JavaScript Objects" and certainly not nested "jQuery objects". – Alnitak Apr 02 '13 at 13:16
  • Yes, the plain JS function returns a DOM element and the jQuery object contains a potential array structure. I've already edited my hastily typed post, try to get over it. – TheManWithNoName Apr 02 '13 at 13:21