CODEWITHSUNDEEP
javascriptgetelementbyid
Luke
Luke

Reputation: 5708

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

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.

Upvotes: 4

Views: 5906

Answers (4)

Ismael Miguel
Ismael Miguel

Reputation: 4241

There are some differences here:

$('foo')

This will get the element with id="foo".
Using this, Prototype will wrap it around it's functions.
Each argument is a different element with a different id that will be selected.

Here you are using the $ (dollar) utility function.

Using this:

document.getElementbyId('foo');

You are selecting the same element, but it isn't wrapped in any framework.
You have direct access to it.

Internally, $('foo') will be mapped to document.getElementbyId('foo').

This isn't relevant to the question, but it's good to point out.

This example:

$('foo')

Might be confused with the jQuery framework, passing as the first element a CSS element selector which would select all <foo> elements.

This would have the same behavior as Prototype's $$ (dollar-dollar) utility.

Upvotes: 0

ssube
ssube

Reputation: 48267

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.

Upvotes: 7

Michał Kutra
Michał Kutra

Reputation: 1202

The notation like $('CSS selectors here') is from framework like jQuery (http://jquery.com/) or Prototype (http://prototypejs.org/).

Expression document.getElementById('ID') and document.getElementsByTagName('HTML TAG NAME') is from pure native Java Script.

You can also see for something like document.querySelector() (https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector) which is also native Java Script but gives us what document.getElementById('ID') don't - possibility to select DOM elements with CSS selectors what is the core of topic which You're writing about.

A more complex comparision of this topic You can find here: document.getElementById vs jQuery $()

Upvotes: 1

vladzam
vladzam

Reputation: 5908

The $('#id') notation is a jQuery selector.

It is the same thing as document.getElementById('id'), which is a Javascript native selector.

In the jQuery API specification (link) you can see that whenever you use the $('#id') selector, jQuery uses document.getElementById() under the hood.

In the article, the PROTOTYPE $ refers to the $ function that is provided by the Prototype JS framework (link) and it should not be confused with the Object.prototype.

Upvotes: 1

Related Questions