JavaScript: $('foo') vs document.getElementById('foo') - Stack Overflow

admin管理员组

文章数量:1345089

Forgive me if this question has been asked before.

I am very new to JavaScript and I was reading the following blog post: /

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.

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./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.

• javascript
• getelementbyid

Share Improve this question Follow asked Jan 14, 2015 at 15:13 LukeLuke 5,71855 gold badges3939 silver badges6868 bronze badges 2

• 1 @LukeP Yes Prototype is a Javascript framework which gives you convenience functions such as this, along with other stuff – Rhumborl Commented Jan 14, 2015 at 15:20
• These libraries regardless, when selecting - would immediately test against document.getElementById() first, before checking other possible matches. – MackieeE Commented Jan 14, 2015 at 15:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Prototype is (was) a fairly mon 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 plex selectors, you may have to pull in a library. jQuery and Prototype can handle much more plicated, CSS-like selectors for elements (#foo > li.bar). With modern browsers, the DOM does support some more plicated 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 plex (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.

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.

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

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/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 plex parision of this topic You can find here: document.getElementById vs jQuery $()

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.

本文标签： JavaScript (39foo39) vs documentgetElementById(39foo39)Stack Overflow