Creating custom methods to use with HTML DOM objects

[bizt]

Hi,

I have the following method:

function addClass(el, cl) // passes a DOM node and class name string

What this function does is takes a DOM object as an passed parameter
and applies the passed class. I also have another two:

function removeClass(el, cl) // passes a DOM node and class name
string
function hasClass(el, cl) // checks if a node has a particular class
assigned

addClass, hasClass and removeClass take into consideration that the
DOM object may have more than one class so simply updating/checking
the className property isnt enough, thus the need for a function.

Now .. what I would much prefer to do is call these methods from the
DOM object instead kinda like:

oLink = document.getElementById("home");
oLink.addClass("selected"); // add the 'selected' class to the link
if(oLink.hasClass("selected")) { // check for class 'selected'
oLink.removeClass("selected"); // remove the 'selected' class from
link
}

Is this possible? Obviously I need to pre set this option but I dont
know how to do this. I know how to define something like the
following:

document.getElementsByClassName = function(cl) {...

... but that only applied this custom function to the document node and
not other nodes (makes sense mind you). How do I make this available
to every node? While Ive been writing this, something has come to
mind:

function addClass(cl) {
this.className+= ' '+cl;
}

// apply to every node
oNodes = document.getElementByTagName("*");
for(var i=0; oNodes.length; i++) {
oNodes.addClass = addClass;
}


... ive tried this add it appears to work, is this the way this would
be implemented? or, is there a one line way similar to my
getElementsByClassName() example but will apply to ALL relevant nodes
(of nodeType 1 i guess) ? I just feel that if I have a to cycle
through every node on a large page it may hinder things a little
although i may be wrong. Any help? Thanks

Burnsy

 

[Dan Rumney]

addClass, hasClass and removeClass take into consideration that the

DOM object may have more than one class so simply updating/checking
the className property isnt enough, thus the need for a function.

Now .. what I would much prefer to do is call these methods from the
DOM object instead kinda like:

oLink = document.getElementById("home");
oLink.addClass("selected"); // add the 'selected' class to the link
if(oLink.hasClass("selected")) { // check for class 'selected'
oLink.removeClass("selected"); // remove the 'selected' class from
link

}

Is this possible?

Yes and no.

You can add functions to a class's prototype using (in this case)

Element.prototype.addClass = addClass

This will work in many browsers, but will not work in IE6,
unfortunately as IE6 does not allow you to alter the Element prototype
in this way.

A little browsing on the internet and I found:
http://www.it-base.ro/2007/07/30/elementprototype-in-internet-explorer/

which seems to address your specific question.

For Googling purposes, you best keywords are going to be something
like

Element Prototype Cross-browser

Good luck