Jquery selectors don't work for assigning dom element to variable

Question

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?

Answer 1

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