473,386 Members | 1,775 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

attaching a method to DOM elements

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
2 2274
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Yvan J. Gagnon | last post by:
I am currenly developing a web site using Macromedia fireworks, and am trying to figure out a way (through hand-coding) of attaching a javascript function (onClick="doit=false") to each of the...
5
by: nukiboy | last post by:
========= test.js =================== function Test() { this.temp = "hehehehe" ; this.method1 = method1 ;
5
by: knocte | last post by:
Hello. I am a web developer very worried about "bloat code" and "languages mixture". So, since some time, I always try to avoid completely the use of javascript in XHTML/HTML files. This leads...
1
by: wh | last post by:
This is more a question of style really, nothing too technical - honest. My question is what is the preferred way of defining the styles of elements in an asp.net page? Supposing I have...
5
by: | last post by:
I am wondering what the best method of attaching custom Events to custom WebUserControls are. I cannot seem to find the proper terminology to expand my research. Basicallly I have a custom user...
2
by: john.lehmann | last post by:
Attacked is a piece of code which first hits the login page successfully and receives back login cookies. But then when I attempt to hit a page which is restricted to logged in users only, I fail....
3
by: zzzbla | last post by:
Hi, I need to attach a javascript function I wrote to the onChange event of a <select> tag. However, I'm using a 3rd party tool that creates the html files - it only lets me add bits of html to...
3
by: tswaters | last post by:
What a pain. I just pressed "Preview Post" only to find that the server forgot who I was and killed my input. So, where once I had everything described really nice, now I'm just going to write my...
1
by: moltendorf | last post by:
I have a simple XMLHttpRequest that grabs a list of messages from my server (I posted a question for a different aspect of this earlier) I have decided to improve on it a little by adding in...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
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,...

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.