473,898 Members | 3,274 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Replacing document.getEle mentById with $ (dollar sign)

I've seen a few frameworks use the following:

function $(id) { return document.getEle mentById(id); }

Then to use:

$('something'). innerHTML = 'blah';

I'm just trying to roll this out to my site and so far doing this has
saved about 8KB of javascript (lots of ajax/dynamic elements). I just
want to know whether there's any browser problems with doing this?
I've tested it on IE7, FF2, Safari 3 and IE6 and can't see any
problems. Are there any browsers that this won't work on?

Thanks
Jun 27 '08
29 19339
On Jun 1, 4:27*am, RobG <rg...@iinet.ne t.auwrote:
On Jun 1, 6:17*pm, VK <schools_r...@y ahoo.comwrote:
[...]
If we are talking about $ function as implemented in Prototype.js then
it is document.getEle mentById with argument check added, so yes, where
document.getEle mentById would error out, $ returns some meaningful
result.

No, it doesn't. *It unconditionally calls document.getEle mentById if
the argument is a string. *There is no feature check or attempt at any
kind of error handling, either for the call or what it returns,
therefore where document.getEle mentById will error, so will
Prototype.js's $ function.
There's a check in Element.extend:

var extend = Object.extend(f unction(element ) {
if (!element || element._extend edByPrototype ||
element.nodeTyp e != 1 || element == window) return element;

When the code reaches: if (!element

- it will return null, and element is null, then null (not undefined)
is returned.

Though it might have seemed more intuitive if the - if (!element) -
check had been done in the dollar function, prior to calling extend.
--
Rob
Jun 27 '08 #21
On Jun 1, 1:17*am, VK <schools_r...@y ahoo.comwrote:
On Jun 1, 1:41 am, dhtml <dhtmlkitc...@g mail.comwrote:
On May 31, 5:27 am, VK <schools_r...@y ahoo.comwrote:
On May 30, 5:06 am, dhtml <dhtmlkitc...@g mail.comwrote:
On May 28, 10:05 am, dhtml <dhtmlkitc...@g mail.comwrote:
On May 28, 8:53 am, timothytoe <timothy...@gma il.comwrote:
On May 27, 6:07 pm, dhtml <dhtmlkitc...@g mail.comwrote:
On May 27, 4:32 pm, RobG <rg...@iinet.ne t.auwrote:
It gets a little more complicated than it appears. Prototype JS's $
does not return a DOM Element, but instead a DOM Element that is
wrapped with a Prototype JS Element.
<clarificatio n>
It actually is a DOM Element that gets returned, but with other
properties added to it, depending on the tagName.
</clarification>
Still wrong ;-)
$ returns whatever document.getEle mentById would return.
No, it doesn't. Whatever $ returns depends on the browser and what the
library has assumed has has been done to Host DOM interfaces'
prototypes.

By saying "prototype" here we are of course referring to the generic
term meaning, like "an original type, form, or instance of something
serving as a typical example, basis, or standard for other things of
the same category". We do not mean the Javascript prototype as of say
Array.prototype or MyObject.protot ype
DOM interfaces are not instances of Javascript Object nor they have
anything to do with it, whatever isProrotypeOf or instanceof checks
would report on some browsers.
The trick is
that on Gecko browsers all DOM elements are claimed to be JavaScript
objects with the Object prototype underneath, just like Array, Date or
MyOwnObject would be. Technically it is of course not true, but this
is what prototype checks will report.
There is no standard to support the author's assumption that
HTMLTableRowEle ment, or someNode.__prot o__ will be an object, or that
modifying that object, that the properties will be resolved on DOM
nodes of corresponding tagNames. It doesn't work cross browser.
Relying on the __proto__ property is not guaranteed to be safe.

Not sure how did Netscape/Gecko __proto__ popped up into the picture.
I guess I missed some of previous posts. Of course no one should relay
on __proto__ property availability for cross-browser solutions.
Element.extend uses a different approach used for other browsers. This
other approach is to add extra properties to the individual element
itself.

The native DOM element interfaces get open for augmentation and
modification over XUL (Gecko) and behavior (IE). This way one can make
say all P element on the page able to play music or make XHR request.
It is a very powerful and flexible approach. Unfortunately minor
players are still late to implement either one so wherever Safari or
similar is in consideration one still has to use the prehistoric
element iteration with new properties assignment.
$ does not, in fact, return whatever document.getEle mentById would
return.

If we are talking about $ function as implemented in Prototype.js then
it is document.getEle mentById with argument check added, so yes, where
document.getEle mentById would error out, $ returns some meaningful
result. Where document.getEle mentById would work, $ returns what
document.getEle mentById does return.
The dollar function calls Element.extend. Element.extend modifies the
element by adding a lot of properties to it.

I'm going to post up the code again, with my comments interspersed,
annotated GS:-

Object.extend(f unction(element ) {
// (GS) if the element is null or has been extended, or is not an
ELEMENT_NODE, return
if (!element || element._extend edByPrototype ||
element.nodeTyp e != 1 || element == window) return element;

// (GS) Copy the Methods (gets init'd below in refresh()
var methods = Object.clone(Me thods),
tagName = element.tagName , property, value;

// extend methods for specific tags
if (ByTag[tagName]) Object.extend(m ethods, ByTag[tagName]);

// (GS) Copy the methods to the element
for (property in methods) {
value = methods[property];
if (Object.isFunct ion(value) && !(property in element))
element[property] = value.methodize ();
}
element._extend edByPrototype = Prototype.empty Function;
return element;
}

-
Element.extend copies the methods to the element, calling isFunction()
and methodize().

The dollar function does not, in fact, return the same thing that
getElementById returns. The documentation explains this:
http://prototypejs.org/learn/extensions

Just the facts.
Jun 27 '08 #22
dhtml wrote:
On Jun 1, 4:27 am, RobG <rg...@iinet.ne t.auwrote:
>On Jun 1, 6:17 pm, VK <schools_r...@y ahoo.comwrote:
[...]
>>If we are talking about $ function as implemented in Prototype.js then
it is document.getEle mentById with argument check added, so yes, where
document.getE lementById would error out, $ returns some meaningful
result.
No, it doesn't. It unconditionally calls document.getEle mentById if
the argument is a string. There is no feature check or attempt at any
kind of error handling, either for the call or what it returns,
therefore where document.getEle mentById will error, so will
Prototype.js 's $ function.

There's a check in Element.extend:
However, there is no check for document.getEle mentById().
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8************ *******@news.de mon.co.uk>
Jun 27 '08 #23
VK
On Jun 2, 1:58 am, dhtml <dhtmlkitc...@g mail.comwrote:
The dollar function does not, in fact, return the same thing that
getElementById returns. The documentation explains this:http://prototypejs.org/learn/extensions

Just the facts.
This discussion was not so much about a particular function named $ in
Prototype.js library. It was overall about using $ identifier in
Javascript and in particular using $ identifier for a function being a
strict, lightweight or extended variant of Prototype.js one's: or even
just being a plain-vanilla wrapper over document.getEle mentById. Other
words, does $ identifier have any "by contract" semantic one should
account. Because even with Prototype.js in use no one is forcing to
use the default $ function. Just override it with a simple
function $(id) {
return document.getEle mentById(id) || null;
}
Jun 27 '08 #24
VK wrote:
[...] Because even with Prototype.js in use no one is forcing to
use the default $ function. Just override it with a simple
function $(id) {
return document.getEle mentById(id) || null;
}
I can imagine you would actually be capable of that kind of nonsense.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Jun 27 '08 #25
On Jun 1, 9:58 pm, VK <schools_r...@y ahoo.comwrote:
On Jun 1, 3:27 pm, RobG <rg...@iinet.ne t.auwrote:
On Jun 1, 6:17 pm, VK <schools_r...@y ahoo.comwrote:
[...]
If we are talking about $ function as implemented in Prototype.js then
it is document.getEle mentById with argument check added, so yes, where
document.getEle mentById would error out, $ returns some meaningful
result.
No, it doesn't. It unconditionally calls document.getEle mentById if
the argument is a string. There is no feature check or attempt at any
kind of error handling, either for the call or what it returns,
therefore where document.getEle mentById will error, so will
Prototype.js's $ function.

document.getEle mentById(nonExi stingID) should not error out neither:
To reiterate what you posted:

"where document.getEle mentById would error out, $ returns
some meaningful result."

The Prototype.js $ function does not do anything of the sort.

it simply returns null (undefined?) so false in condition checks.
That is the specified behaviour, it has nothing to do with
Prototype.js handling cases where calling getElementById throws an
error.

Prototype's $ adds argument check for being an object reference.
No, it doesn't. It first checks the number of arguments and if there
is more than one, it calls itself recursively with each argument. If
there is one argument, it checks if it's a string and if so, calls
getElementById unconditionally . There is no error handling.

This
way where document.getEle mentById(object Reference) would search for id
"[object Object]" or "HTMLParagraphE lement" or similar, $ simply
echoing the argument back.
No, it doesn't. If the argument is a string, it calls getElementById
and passes the result to Element.extend. Otherwise, it simply passes
the argument to Element.extend, whatever it is.
Such method polymorphism can be considered
as handy or bad as error-hiding but it would be all different question
then.
There is no error handling - zip, zero, nada, none.
--
Rob
Jun 27 '08 #26
On Jun 2, 7:40*am, dhtml <dhtmlkitc...@g mail.comwrote:
On Jun 1, 4:27*am, RobG <rg...@iinet.ne t.auwrote:
On Jun 1, 6:17*pm, VK <schools_r...@y ahoo.comwrote:
[...]
If we are talking about $ function as implemented in Prototype.js then
it is document.getEle mentById with argument check added, so yes, where
document.getEle mentById would error out, $ returns some meaningful
result.
No, it doesn't. *It unconditionally calls document.getEle mentById if
the argument is a string. *There is no feature check or attempt at any
kind of error handling, either for the call or what it returns,
therefore where document.getEle mentById will error, so will
Prototype.js's $ function.

There's a check in Element.extend:

* var extend = Object.extend(f unction(element ) {
* * if (!element || element._extend edByPrototype ||
* * * * element.nodeTyp e != 1 || element == window) return element;

When the code reaches: if (!element
That is not error handling - if getElementById throws an error inside
the $ function, Element.extend won't even be called.

- it will return null, and element is null, then null (not undefined)
is returned.

Though it might have seemed more intuitive if the - if (!element) -
check had been done in the dollar function, prior to calling extend.
I don't have a problem with checking the returned value later
considering Element.extend is a "public" method, only the notion that
it is error handling. It just checks to see if the argument is
something it wants to add properties to (a sensible precaution),
otherwise it just returns it.
--
Rob
Jun 27 '08 #27
On Jun 1, 3:42*pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:
dhtml wrote:
On Jun 1, 4:27 am, RobG <rg...@iinet.ne t.auwrote:
On Jun 1, 6:17 pm, VK <schools_r...@y ahoo.comwrote:
[...]
However, there is no check for document.getEle mentById().
This:-

if(document.get ElementById)

?

I guess that's what RobG was getting at, then.
PointedEars
Jun 27 '08 #28
On Jun 1, 3:52*pm, VK <schools_r...@y ahoo.comwrote:
On Jun 2, 1:58 am, dhtml <dhtmlkitc...@g mail.comwrote:
The dollar function does not, in fact, return the same thing that
getElementById returns. The documentation explains this:http://prototypejs.org/learn/extensions
Just the facts.

This discussion was not so much about a particular function named $ in
Prototype.js library. It was overall about *using $ identifier in
Javascript and in particular using $ identifier for a function being a
strict, lightweight or extended variant of Prototype.js one's: or even
just being a plain-vanilla wrapper over document.getEle mentById. Other
words, does $ identifier have any "by contract" semantic one should
account. Because even with Prototype.js in use no one is forcing to
use the default $ function. Just override it with a simple
I brought the discussion this way because of the question: "What does
$ mean?" Language is just symbolism for thought and all words got made
up at some point. However, the new symbol needs an accurate
description. We don't go naming our variables arbitrary symbols, we
give them meaningful name. A way answer that question "What does $
mean," is to look to what the dollar function means to most
developers. When I see that dollar function, I think of PrototypeJS
from association and I assumed other developers might, too.

*function $(id) {
* return document.getEle mentById(id) || null;
*}
The null check is pointless; document.getEle mentById will return an
Element or null (if none found).

Jun 27 '08 #29
dhtml wrote:
On Jun 1, 3:42 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:
>dhtml wrote:
>>On Jun 1, 4:27 am, RobG <rg...@iinet.ne t.auwrote:
On Jun 1, 6:17 pm, VK <schools_r...@y ahoo.comwrote:
[...]
However, there is no check for document.getEle mentById().
Maybe I should have said "There is no check for document.getEle mentById()
*there* (in Prototype.js's `$()').
This:-

if(document.get ElementById)

?
This is only the first step in feature-testing a host object's method.
Search for isMethod() instead.
I guess that's what RobG was getting at, then.
Not quite.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
Jun 27 '08 #30

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

29
22229
by: Mark Hahn | last post by:
We are considering switching to the dollar sign ($) for self, instead of the period ( . ) we are using now in Prothon. Ruby uses the at-sign (@) for self, but our new usage of self also includes replacing the period for some attribute references, as in obj$func() versus obj.func(), and too many programs treat that as an email address and screw it up. Also the S in the symbol $ reminds one of the S in $elf. Can people from outside the...
17
10475
by: Digital Puer | last post by:
I've inherited some code where the coder placed dollar signs in his preprocessor macros. What is the significance of the dollar signs ($) ? Example: #define ALLOCATE(task,pointer) \ { \ long task$; \ if (task == FOO) { \ task$ = ZERO); \
2
3050
by: Yorian | last post by:
I just started to try regexps in php and I didn't have too many problems, however I found a few when trying to build a templte engine. The first one is found is the dollar sign. In my template I would like to write this: {$var} where var ofcourse will be replaced by the real var however I'm having trouble with the dollar sign I do escape the it though, my regexp:
2
2329
by: johnson4 | last post by:
Im wanting to display a dollar sign on my wap application, which requires that the cell phone is served with $$ to display $. Therefor I'm trying to find an easy way, in my php code, that will always add a dollar sign next to any existing dollar sign. so that dollar signs are always served in pairs The content is residing in a MySQL database. Thanks for any help that can be offered.
0
9993
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11259
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10857
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10948
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10483
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
8035
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7187
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5880
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4706
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.