4

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.

Luke
  • 5,567
  • 4
  • 37
  • 66
  • 1
    @LukeP Yes [Prototype](http://prototypejs.org/) is a Javascript framework which gives you convenience functions such as this, along with other stuff – Rhumborl Jan 14 '15 at 15:20
  • These libraries regardless, when selecting - would immediately test against `document.getElementById()` first, before checking other possible matches. – MackieeE Jan 14 '15 at 15:28

4 Answers4

7

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.

ssube
  • 47,010
  • 7
  • 103
  • 140
  • This still doesn't explain the differences. It just tells that `$` points to jQuery and if you don't want that, just use the other. – Ismael Miguel Jan 14 '15 at 15:32
  • @IsmaelMiguel It certainly does: `$` is an external dependency that provides helpers and allows for more complex selectors. `getElementById` is a quick, simple, built-in method. – ssube Jan 14 '15 at 15:36
  • That isn't entirely correct, since jQuery is a framework that also handles things like CSS, animations and much more. jQuery even has it's own set of tools to handle events (both built-in and custom)! jQuery is a framework and not just a "dependency that provides helpers". Also, saying it that way means that you depend on jQuery for something to work. – Ismael Miguel Jan 14 '15 at 15:41
  • @IsmaelMiguel I didn't say `$` was jQuery. In fact, the original question specifically says it is Prototype, so my answer is generalized to cover both Prototype (specified by OP) and jQuery (defacto `$` implementation). – ssube Jan 14 '15 at 15:42
  • But still, you have lots of inaccuracies like this: "Prototype is (was) a fairly common library to select elements.". Sizzle is a library to select elements, Prototype is another framework. – Ismael Miguel Jan 14 '15 at 15:44
  • @IsmaelMiguel Prototype provides a global `$` function that acts as a fairly simple wrapper around `getElementById` ([source](http://en.wikipedia.org/wiki/Prototype_JavaScript_Framework#The_.24.28.29_function)). Prototype does a number of other things, many irrelevant to this question. – ssube Jan 14 '15 at 15:47
  • That means that Prototype *isn't* a library to select elements. – Ismael Miguel Jan 14 '15 at 15:50
1

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 $()

Community
  • 1
  • 1
Michał Kutra
  • 1,202
  • 8
  • 21
  • hmm, you would think he would mention JQuery if that's what he was talking about. Did you read the article? – Luke Jan 14 '15 at 15:19
  • @LukeP - Since that article is 8 years old, it may be referring to http://prototypejs.org/ – j08691 Jan 14 '15 at 15:20
  • I've updated it but rules are same. It's all about selecting DOM elements with CSS or old, native JS methods – Michał Kutra Jan 14 '15 at 15:22
1

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.

vladzam
  • 5,462
  • 6
  • 30
  • 36
0

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.

Ismael Miguel
  • 4,185
  • 1
  • 31
  • 42
  • The question specifically states the Prototype is being used, rather than jQuery, and the `$('foo')` syntax in Prototype will select the element with an ID of `foo`, rather than the jQuery/CSS-style elements-of-type-`foo`. – ssube Jan 14 '15 at 15:51
  • @ssube Thank you for pointing it out. The inaccuracies have been addressed. – Ismael Miguel Jan 14 '15 at 16:03
  • `$('foo')` will get the tag 'foo' whereas `$('#foo')` will get the id 'foo' and `$('.foo')` will get the class 'foo'. – Logan Hasbrouck Dec 02 '15 at 14:16
  • @LoganHasbrouck That is correct... for jQuery. If you read the question (and answer) carefully, you will see that we are talking about Prototype. There's a bit there where I compare `jQuery('foo')` vs. `Prototype('foo')`. Other than that, it's always Prototype. Read the 1st comment, written by ssube. – Ismael Miguel Dec 02 '15 at 14:53
  • Ah, I see now. I have never heard of this 'prototype' but I saw jQuery mentioned so I thought it's syntax would be the same. – Logan Hasbrouck Dec 03 '15 at 13:48
  • @LoganHasbrouck I though the same too. But I looked carefully (thanks to ssube) and I saw I was wrong. Living and learning with our mistakes, right? – Ismael Miguel Dec 03 '15 at 14:28
  • Indeed haha. I am still learning myself as I've only finished college last winter and am self teaching jQuery and ajax presently. I need to find someone I can have look at my site and tell me how horrible my coding is hahaha. – Logan Hasbrouck Dec 03 '15 at 15:02
  • @LoganHasbrouck This is not the right place to talk about this kind of business, but you can always visit Code Review (http://codereview.stackexchange.com/). There, you can post your code and get tips on how to improve it in every single aspect you can imagine! (But before posting anything, please, read the faq at: http://codereview.stackexchange.com/help, stats by reading about what is on-topic and how to ask a question). The guys there are really friendly. You really should visit it. – Ismael Miguel Dec 03 '15 at 15:07