Adding methods to Node or Element objects?

[Weston C]

I'm wondering if it's possible to add a method to the Node and/or
Element objects (so they'd subsequently be available to any
node/element). I'd assume you could just do something like:

n.myNewMethod = function myNewMethod;

where n is any Node -- but the fact that Nodes and Elements are
explicitly definied as interfaces rather than actual objects in the DOM
standard makes me wary. Javascript/ECMAscript, iirc, however, uses a
prototype object-oriented model that doesn't have interfaces, right?

Thanks,
Weston



~==~
http://weston.canncentral.org/
Taking Pictures During Dreams
weston8[at]cann8central.org
(remove eights to email me)

 

[Lasse Reichstein Nielsen]

I'm wondering if it's possible to add a method to the Node and/or
Element objects (so they'd subsequently be available to any
node/element). I'd assume you could just do something like:

Not generally.
In Mozilla, you can use
Node.prototype.myNewMethod = function (...){...};
Other browsers don't have the constructor function for nodes available.

Javascript/ECMAscript, iirc, however, uses a prototype
object-oriented model that doesn't have interfaces, right?

Yes. There is no requirement in the W3C DOM that the ECMAScript binding
makes constructors available. You have the factory methods on the document
object if you need to create elements.

/L

 

[Grant Wagner]

I'm wondering if it's possible to add a method to the Node and/or
Element objects (so they'd subsequently be available to any
node/element). I'd assume you could just do something like:

n.myNewMethod = function myNewMethod;

where n is any Node -- but the fact that Nodes and Elements are
explicitly definied as interfaces rather than actual objects in the DOM
standard makes me wary. Javascript/ECMAscript, iirc, however, uses a
prototype object-oriented model that doesn't have interfaces, right?

Thanks,
Weston

Sure, the following works in Gecko based browsers (Mozilla Firebird,
Mozilla, Netscape 7.x, Camino):

<div id="blah"></div>
<div id="bleh"></div>
<script type="text/javascript">
HTMLDivElement.prototype.myId = function() {
alert(this.id);
}
</script>
<button onclick="document.getElementById('blah').myId();">blah</button>
<button onclick="document.getElementById('bleh').myId();">bleh</button>

I figured out how to this here: <url:
http://www.mozilla.org/docs/dom/mozilla/protodoc.html />

For most other browsers you'll just have to assign the method to all the
elements of that type at run-time:

<div id="blah"></div>
<div id="bleh"></div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
if (divs != null) {
for (var i = 0; i < divs.length; i++) {
divs.myId = myId;
}
}
function myId() {
alert(this.id);
}
</script>
<button onclick="document.getElementById('blah').myId();">blah</button>
<button onclick="document.getElementById('bleh').myId();">bleh</button>

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html