Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Creating custom methods to use with HTML DOM objects

Reply
Thread Tools

Creating custom methods to use with HTML DOM objects

 
 
bizt
Guest
Posts: n/a
 
      06-03-2008
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[i].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
 
Reply With Quote
 
 
 
 
Dan Rumney
Guest
Posts: n/a
 
      06-03-2008
> 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/ele...rnet-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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DOM ? HTML DOM mk834tt@yahoo.com Javascript 1 12-20-2007 01:08 AM
straight html or dom generated html objects faster? anagai Javascript 1 01-02-2006 09:27 PM
Creating SELECT MULTIPLE via DOM methods Adam Tilghman Javascript 6 12-16-2005 12:16 PM
Convert a XML DOM Object to a HTML DOM Object manjunath.d@gmail.com XML 0 09-20-2005 08:16 AM
get methods of DOM objects oeyvind toft Javascript 4 09-09-2004 12:42 PM



Advertisments