JavaScript: $('foo') vs document.getElementById('foo')

Question

Forgive me if this question has been asked before.

I am very new to JavaScript and I was reading the following blog post: http://www.dustindiaz.com/javascript-no-no/

The first point he makes is to move document.getElementByID() calls into a getter. This makes sense to me as it makes the code more modular and convenient in general. However, he then says:

Most will even prefer the classic Prototype $ function that allows you to pass in an arbitrary number of arguments. That works well too.

$('foo', 'bar', 'baz');

I have not been able to find documentation on this method though, am I reading it right that this is equivalent to calling document.getElementById(), except that you can have multiple arguments with the prototype?

If so, what are the advantages to using document.getElementbyId('foo') over $('foo')?

Edit: I just realized that he capitalized the P in "Prototype". Is Prototype some sort of external framework? I was under the impresstion that it was just like a shortcut or something.

Answer 1

Prototype is (was) a fairly common library to select elements and provide helpers, generally around manipulating said elements. The $ function is generally associated with jQuery now, although Prototype still exists and is somewhat maintained (the last release appears to have been April 2014).

Which to use depends heavily on what you need to do. If all you want to do is select elements by ID, then simply use document.getElementById (wrapped in methods or cached as appropriate). It is built into browsers and does what you need in a simple, reliable way. If you don't need a dependency, especially one as heavy as Protoype or jQuery are, then don't include it.

However, if (or when) you start needing more complex selectors, you may have to pull in a library. jQuery and Prototype can handle much more complicated, CSS-like selectors for elements (#foo > li.bar). With modern browsers, the DOM does support some more complicated selectors (such as getElementsByClassName to select by class, or querySelectorAll providing CSS selectors), which may provide enough flexibility that you never need a library.

A significant difference between jQuery and Prototype is that the $ function provided by Prototype is a wrapper around getElementById, and you should use $$ for complex (CSS) selectors. jQuery, on the other hand, only provides the $ form and supports all selectors there. If all you need is Prototype's $, then getElementById will probably fill your needs without the dependencies.

Note that Prototype and jQuery also provide some helpers, once you've selected elements. You can $("#foo").find(".bar").hide() to hide all elements in #foo with the bar class, for example. You should review the docs for each and see how many of the features you expect to use.