attaching a method to DOM elements

C

Csaba2000

I've been thinking the replies to my earlier post. I can attach
a method to a DOM element as below. But instead of
assigning it to each element individually, I would rather
have it as a method of every DOM element (and failing
that, as a method of all javascript objects) - that would
be much more tidy and memory conscious.

What is the proper syntax for this, because I can't seem
to get it to work on either IE 6 or Firefox 1.0.1 with
..prototype, .__prototype__, .__parent__, or
new Closure (that's obsolete, right?) - or is this not doable?
The idea, of course, if I understand things right, would be to
have showMe (and sorry if I'm butchering the terminology) as a
method on the prototype of all DOM elements so the 'this'
will be appropriately bound when the function is entered.


<body onLoad="tryit()"><div
id=myDiv>Placeholder</div>
<script type='text/javascript'>
showId = function() {
try { var base = "This " + this.tagName + " has ";
if (!this.id) alert(base + "no id");
else alert(base + "id: " + this.id); }
catch(e) {alert("elem has no id");}
}
var aAll = document.all || document.getElementsByTagName("*");
for (var idx in aAll) aAll[idx].showId = showId;
function tryit() {
document.body.showId(); // will show This BODY has no id
document.body.childNodes[0].showId(); // will show myDiv
}
</script></body>



Thanks,
Csaba Gabor from Vienna
 
D

Dietmar Meier

Csaba2000 said:
I can attach
a method to a DOM element as below. But instead of
assigning it to each element individually, I would rather
have it as a method of every DOM element

Here is an example for Geckos and MSIE 5.5+ that adds a method showid()
to all HTML elements in the document by using the HTMLElement prototype
in Geckos and using a CSS Behavior in MSIE:

,-----[ showid.html ]-----
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
| "http://www.w3.org/TR/html4/strict.dtd">
| <html>
| <head>
| <meta http-equiv="Content-Script-Type" content="text/javascript">
| <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
| <title>insertAfter-Test</title>
| <!--[if gte ie 5.5]>
| <style type="text/css">
| * { behavior:url(ieshowid.htc) }
| </style>
| <![endif]-->
| <script type="text/javascript" src="mozshowid.js"></script>
| <script type="text/javascript">
| window.onload = function() {
| var oB, aBC;
| if ((oB = document.body) && "undefined" != typeof oB.showId) {
| oB.showId();
| }
| if (oB && (aBC = oB.childNodes) && aBC[0] && "undefined" != typeof aBC[0].showId) {
| aBC[0].showId();
| }
| }
| </script>
| </head>
| <body><div id="myDiv">Placeholder</div></body>
| </html>

,-----[ mozshowid.js ]-----
| if (typeof HTMLElement != "undefined" && HTMLElement.prototype) {
| HTMLElement.prototype.showId = function() {
| alert(
| "This " + this.tagName + " has " +
| (this.id? "id: " + this.id : "no id")
| );
| };
| }

,-----[ ieshowid.htc ]-----
| <public:component>
| <public:method name="showId" />
| <script type="text/jscript">
| function showId() {
| alert(
| "This " + this.tagName + " has " +
| (this.id? "id: " + this.id : "no id")
| );
| }
| </script>
| </public:component>

ciao, dhgm
 
M

Michael Winter

Csaba2000 wrote:

[snip]
What is the proper syntax for this, because I can't seem
to get it to work on either IE 6 or Firefox 1.0.1

As far as I know, prototyping elements is only possible with
Mozilla-like browsers. It certainly isn't with IE or Opera (though
Opera does expose some interfaces which possess static members like Node).
with .prototype,

This is the one to use. All HTML elements are objects implementing the
HTMLElement interface:

/* Firefox types HTMLElement as an object.
* Other user agents may choose function.
*/
if(('object' == typeof HTMLElement)
&& ('object' == typeof HTMLElement.prototype))
{
HTMLElement.prototype.showId = function() {alert(this.id);};
}

You can be more specific by using the DOM-defined interface names for
the various element types, such as HTMLSelectElement and
HTMLParagraphElement. Note that some simple elements do not have their
own interface and implement only HTMLElement. These elements are
listed in the DOM HTML specification in section 1.6.4 - The
HTMLElement interface.
[...] new Closure (that's obsolete, right?)

That one's new to me.
- or is this not doable?

In general, no it isn't.

[snip]

Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,995
Messages
2,570,231
Members
46,820
Latest member
GilbertoA5

Latest Threads

Top