Forum: Rails Spinoffs (closed, excessive spam) Adding Properties to DOM::Elements as opposed to adding Methods

2047146bc51c93d8aabd41e118509b5f?d=identicon&s=25 EricGoogle (Guest)
on 2008-06-16 19:53
(Received via mailing list)

Can Element::addMethods() be used to add properties to Elements in
addition to adding Methods?

I assume IE prevents properties being added to DOM::Element in
addition to preventing the adding of methods - so is it possible to
use prototype.js to add properties as well as methods to DOM::Element?

thanks for any insight.



var myMethodsAndProperties =
     myFirstMethod: function( arg)
         element = $(element);
         // do something
         return element;

     myFirstNewProperty:  var newProperty;  ????????????????

Element.addMethods( 'DIV', myMethodsAndProperties );
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-16 22:23
(Received via mailing list)
It's generally possible, but prototype only allows for functions (i.e.
Object.isFunction -> true). I'm not exactly sure why there's this
limitation. Would you explain how extending nodes with properties
might be useful?

- kangax
2047146bc51c93d8aabd41e118509b5f?d=identicon&s=25 EricGoogle (Guest)
on 2008-06-17 20:25
(Received via mailing list)
Hello kangax,

I am trying to keep "state" information in the correspoding elements
themselves rather that having each element have a "brother object"
that keeps it's state information.
I can't figure out how to do that with a method as opposed to a

I can think of many useful reasons for having both properties and
methods for objects in a language and this is a good example of how it
could be useful.

thanks for the feedback,

327bdb2421fd302aa0f656b0b0acd5de?d=identicon&s=25 Matt Foster (Guest)
on 2008-06-17 20:56
(Received via mailing list)
Could the method be used as a "getter" that would return the reference
to the proper state?

Matt Foster
Ajax Engineer
Nth Penguin, LLC
Cc9ea3ae6329d9e88adfba76a542735a?d=identicon&s=25 Ken Snyder (Guest)
on 2008-06-17 21:23
(Received via mailing list)
EricGoogle wrote:
> could be useful.
> thanks for the feedback,
> -Eric
Attaching custom properties to elements is quite useful, but you don't
need to attach a property to Element.prototype in order to do it. You
should probably attach properties something like this:

$$('.brothers').invoke('writeAttribute', '__isBrother', true);

// OR
$$('.celebrity').each(function(element) {
  var brother =;
  element.writeAttribute('__brother', brother);

// OR
$$('.celebrity').each(function(element) {
  var brotherId =;
  element.writeAttribute('__brotherId', brotherId);

If that isn't helpful, maybe you could tell us more about what your
application needs to do.

- Ken Snyder
327bdb2421fd302aa0f656b0b0acd5de?d=identicon&s=25 Matt Foster (Guest)
on 2008-06-17 21:32
(Received via mailing list)
Had to prove to myself that was even possible,  I've got it done
although I know it could be written a bit smoother, it gets the job
done for the example.  Seems like too much work to get such a simple
task accomplished but it does allow for a nice private variable,
getter/setter pattern.

var ref = function(){
          var state = 0;
          this.set = function(incoming){ state = incoming;};
          this.get = function(){ return state; };
  Element.addMethods("DIV", {
    stateReference : function(ele){
          return ele.stateReferenceGetter = new ref();
          return ele.stateReferenceGetter;

To check out the demo in action,

Demo goes down in Firebug basically, speaking of which today is FF 3
Download Day, show some support!!

Matt Foster
Ajax Engineer
Nth Penguin, LLC
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-17 21:45
(Received via mailing list)
Eric, doesn't extending elements directly solve the problem? = 'bar';

I also happen to use custom Element#setProperty quite often:

It's convenient in a context of iterators:

$(someElement).setProperty('foo', 'bar');
$$('.someClass').invoke('setProperty', 'foo', 'bar');

- kangax
2047146bc51c93d8aabd41e118509b5f?d=identicon&s=25 EricGoogle (Guest)
on 2008-06-18 18:28
(Received via mailing list)

This was working for me in my test code in Firefox but failing in IE
and I was trying my best (and it is exceedingly time wasting and
painful so far) to write CrossBrowser Code (What an extreme waste of
brain cells and time - it has taken me ten or more times as long to
write) :P
As I understand it - IE doesn't allow you to extend the Element type -
hence much of the usefullness of Prototype.js for me.

I need to have complex state objects holding perhaps other objects -
not just text data - hence why setting a text property isn't quite
cutting it either.

I'd really like to have some object references held in the state
properties for my custom Element object.

ie..   myDivObject.objectReference = someOtherObject;    etc...

Will this work???   $(myElement).setProperty( 'objRef',
myObject ) ???? or does setProperty only take strings???


F490e41cd5de1393a9f6958b70dae6ab?d=identicon&s=25 Frederick Polgardy (Guest)
on 2008-06-18 19:41
(Received via mailing list)
Yes, you can do all of this.  What @kangax is saying is that you can't
extend the DOM *prototypes* in IE, so that all new elements that are
in the document, whether by setting innerHTML, or whatever, have some
method.  Once you fetch an object from the DOM, you can add whatever you
want to it, but it's just inconvenient to have to do it all the time
manually.  Prototype helps you out a lot, but there are cases when you
have to do it yourself.

And text property means that the key is text, not the value.  You can
properties refer arbitrarily to other objects.


On Wed, Jun 18, 2008 at 11:27 AM, EricGoogle

> myObject ) ???? or does setProperty only take strings???

Science answers questions; philosophy questions answers.
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-18 19:47
(Received via mailing list)
Yes, this will work.
IE allows to extend element instance, not element's [[Prototype]],
therefore manual extension every time you need to use any of the
I can make a patch for addMethods to accept "properties" (not only
"methods") if you really need it.

- kangax
2047146bc51c93d8aabd41e118509b5f?d=identicon&s=25 EricGoogle (Guest)
on 2008-06-20 17:33
(Received via mailing list)

Would a patch for addMethods to accept "properties" allow me to use
dot notation for recalling the properties values i.e. $

If so that would really make my code clean and easy to follow.  If you
could do that that would be great :)

thanks for listening and thanks everyone for the clarifications and

F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-20 18:44
(Received via mailing list)
2047146bc51c93d8aabd41e118509b5f?d=identicon&s=25 EricGoogle (Guest)
on 2008-07-10 17:17
(Received via mailing list)
Hello again kangax,

thanks for the patch - I got a chance to add it to my prototype
framework today and mess with it a bit.

I think i might not be calling it right?  Am i creating a new property
correctly with addMethods() ?
  highlight: function( element, color )
  { = color;

  foo: new Object()

var option = new Element( 'div' );
alert( );

result "undefined";
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-07-10 17:39
(Received via mailing list)
Which browser would that be?

-- kangax
2047146bc51c93d8aabd41e118509b5f?d=identicon&s=25 EricGoogle (Guest)
on 2008-07-10 19:58
(Received via mailing list)
Ahh... I was too quick.  I must of tested in Firefox and not IE.

It prints "object Object" in IE6 6.0.29 - which is where i need the
functionality most.

In Firefox 3.0 (Release Version) i get undefined.

I believe I can add properties to DOM::Elements directly in Firefox -
so I can put a Browser Check there to use addMethods() in IE and add
the properties directly in Firefox.

F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-07-10 20:52
(Received via mailing list)
Iteresting. I tested it in Firefox 2 when creating a patch and it
seemed to work just fine.

-- kangax
This topic is locked and can not be replied to.