By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

attaching a method to DOM elements

P: n/a
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

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Csaba2000 wrote:
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
Jul 23 '05 #2

P: n/a
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.