JavaScript "objects" to extend HTML Elements

[Rudi Hausmann]

Hi!

I create HTML pages on the server side. I want to extend DIV elements
with more information.

E.g.:

<DIV id="Joe" />

Now I want Joe to have an age for example and access it using:

$('joe').age = 20;

Doing that directly might work. Or maybe I should better use a wrapper,
which separates the person as own object from the DIV element, like:

GetPersonObject('Joe').age = 20;

I didn't use so much JavaScript until now. Maybe someone already had the
same problem and can provide or link to some code?

Regards,

Rudi

 

[VK]

Hi!

Hi!
The German beer is the best one - I'm declaring it for each of my stay
in here but it doesn't hurt to repeat - even if out of context

I create HTML pages on the server side. I want to extend DIV elements
with more information.
Cool.

E.g.:

<DIV id="Joe" />

What's this oldy yaky pseudo-XHTML stuff? Stay modern - be HTML:

Now I want Joe to have an age for example and access it using:

$('joe').age = 20;

Be aware that $ is not a native JavaScript method, it is a custom
method from prototype.js or prototype.js-compliant library. After that
you are cool again.

Doing that directly might work. Or maybe I should better use a wrapper,
which separates the person as own object from the DIV element, like:

GetPersonObject('Joe').age = 20;

I didn't use so much JavaScript until now. Maybe someone already had the
same problem and can provide or link to some code?

Well, Gecko (Firefox & Co) and IE are having a bit different opinion
on the problem. First of all, DOM Interface has nothing to do with
JavaScript object: none. Secondly, HTML source code (these text
strings sent over HTTP protocol) has a very weak relation with the
resulting DOM Interfaces client-side. They are like the pirate's code:
not a rule but merely a guideline.
I could speak for it for hours, but I'm getting my next pint Metzkater
in a few minutes, so:

<div id="foo" foobar="foo" barfoo="bar">

in this case use only $('foo').getAttribute('foobar') because of Gecko/
M$ differences.

Best!

 

[-Lost]

On Apr 20, 1:45 pm, Rudi Hausmann <[email protected]> wrote:

Well, Gecko (Firefox & Co) and IE are having a bit different opinion
on the problem. First of all, DOM Interface has nothing to do with
JavaScript object: none. Secondly, HTML source code (these text
strings sent over HTTP protocol) has a very weak relation with the
resulting DOM Interfaces client-side. They are like the pirate's code:
not a rule but merely a guideline.
I could speak for it for hours, but I'm getting my next pint Metzkater
in a few minutes, so:

You could speak about quotes from "Pirates of the Caribbean" for hours?

-Lost

 

[Peter Michaux]

Hi Rudi,

Hi!

I create HTML pages on the server side. I want to extend DIV elements
with more information.

E.g.:

<DIV id="Joe" />

Now I want Joe to have an age for example and access it using:

$('joe').age = 20;

I don't do this but I did see an example in a JavaScript book about
adding what they called a "backing object" to an HTML. The backing
object would have extra information and functions associated with the
object. This would be something like

$('joe').backingObject = {/*...*/};

In that book they also discussed the need to clean these backing off
the object on page unload for memory leak reasons. The problem with
this is JavaScript books are very often wrong in very substantial
ways. I did ask about this practice on comp.lang.javascript much like
you but didn't have any response.

If you do the following you do get the circular memory leak in IE
because the object the HTML object has a reference to the function and
the function has a reference to the object in it's scope chain.

var joe = $('joe');
joe.myFn = function(){};

If you do the following I am not sure if the function has the HTML
object in the function's scope chain. My guess is yes.

$('joe').myFn = function(){};

Hopefully someone else will elaborate on extending HTML objects and
the memory leak issues.

Peter