HTMLElement.prototype
Kester
all HTML elements.
What I mean is just like
Array.prototype.count = countArray
A prototype method which applies to all
arrays in your script.
Now, is there such thing HTMLElement.prototype
or something?
I know you can do this:
<script defer>
document.getElementById('tst').whatsIn=IHTML
function IHTML() {
txt=document.getElementById('tst').innerHTML
alert(txt)
}
</script>
<div id="tst" onclick="this.whatsIn()">
<b>Click me!</b>
</div>
This script will show the innerHTML
of the <div> when you click on it.
But is there a way to apply a method to all
elements?
Thanks,
Kester.
David Mark
which one it was. Basically it involves event bubbling. Check the
other groups that you cross-posted this to...
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Martin Honnen
> Is it possible to assign a prototype to
> all HTML elements.
>
> What I mean is just like
> Array.prototype.count = countArray
> A prototype method which applies to all
> arrays in your script.
> Now, is there such thing HTMLElement.prototype
> or something?
With Netscape 6+/Mozilla there is
HTMLElement
and
HTMLElement.prototype
so that you can do stuff like
<html>
<head>
<title>
HTMLElement.prototype
</title>
<script type="text/javascript">
if (window.HTMLElement && HTMLElement.prototype)
HTMLElement.prototype.setInnerText = function (text) {
while (this.hasChildNodes())
this.removeChild(this.lastChild);
this.appendChild(document.createTextNode(text));
};
</script>
</head>
<body>
<p onclick="if (this.setInnerText)
this.setInnerText('All for Kibology');">
Kibology for all
</p>
<div>
<span onclick="if (this.setInnerText)
this.setInnerText('clicked');"><b>Click me</b></span>
</div>
</body>
</html>
Note however when I tested the above with NN6.2 it failed on the <span>
element, it seems there was a bug in that release. With Mozilla 1.0 it
works flawlessly.
You can even assign innerText setters/getters for innerText so that the
same code works with IE4+ and NN6+
<html>
<head>
<title>
HTMLElement.prototype
</title>
<script type="text/javascript">
if (window.HTMLElement && HTMLElement.prototype) {
HTMLElement.prototype.__defineSetter__ (
'innerText',
function (text) {
while (this.hasChildNodes())
this.removeChild(this.lastChild);
this.appendChild(document.createTextNode(text));
}
);
HTMLElement.prototype.__defineGetter__ (
'innerText',
function () {
var text = '';
for (var i = 0; i < this.childNodes.length; i++) {
if (this.childNodes[i].nodeType == 3)
text += this.childNodes[i].nodeValue;
else if (this.childNodes[i].nodeType == 1)
text += this.childNodes[i].innerText;
}
return text;
}
);
}
</script>
</head>
<body>
<p onclick="this.innerText = 'All for Kibology'; alert(this.innerText);">
Kibology for all
</p>
<div>
<span onclick="alert(this.innerText);
this.innerText = 'clicked';">text in span <b>Click
me</b> text in span</span>
</div>
</body>
</html>
>
> I know you can do this:
>
> <script defer>
> document.getElementById('tst').whatsIn=IHTML
>
> function IHTML() {
> txt=document.getElementById('tst').innerHTML
> alert(txt)
> }
> </script>
>
> <div id="tst" onclick="this.whatsIn()">
> <b>Click me!</b>
> </div>
>
> This script will show the innerHTML
> of the <div> when you click on it.
>
> But is there a way to apply a method to all
> elements?
>
> Thanks,
> Kester.
>
>
--
Martin Honnen
http://javascript.faqts.com/
http://home.t-online.de/home/martin.honnen/jsgoddies.html
Grant Wagner
> But is there a way to apply a method to all
> elements?
>
> Thanks,
> Kester.
Well, you can apply a method to every element on your page:
<body onload="setMethod(document);">
<script>
function HTMLElementMethod() {
alert(this.nodeName);
}
function setMethod(element) {
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].hasChildNodes()) {
setMethod(element.childNodes[i]);
}
if (element.childNodes[i].nodeType != 3) {
// exclude nodes of type 3 (#text) because they
// are not objects and can not be assigned a method
element.childNodes[i].getNodeName = HTMLElementMethod;
}
}
}
</script>
<form>
<input type="button" value="Test INPUT" onclick="this.getNodeName();" />
</form>
<a href="#" onclick="this.getNodeName();return false;">Test A</a>
<div onclick="this.getNodeName();return false;">Test DIV</div>
</body>
There may be additional node types you need to exclude, or there may be
a better way to test for node types that can't have a method added to
them.
And yes, the example is trivial, considering a node already knows it's
type and can tell you. But you can replace the code of
HTMLElementMethod() with whatever you want to do.
--
| Grant Wagner <gwa...@agricoreunited.com>
* Client-side Javascript and Netscape 4 DOM Reference available at:
* http://developer.netscape.com/docs/manuals/javascript.html
* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtmlrefs.asp
* Netscape 6 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 6/Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html
Kester
Kester.
"Grant Wagner" <gwa...@agricoreunited.com> schreef in bericht
news:3D610C83...@agricoreunited.com...