Jquery selectors don't work for assigning dom element to variable
jquery
Solution
`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
Problem
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?