Creating custom methods to use with HTML DOM objects

Discussion in 'Javascript' started by bizt, Jun 3, 2008.

  1. bizt

    bizt Guest

    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
     
    bizt, Jun 3, 2008
    #1
    1. Advertising

  2. bizt

    Dan Rumney Guest

    > 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
     
    Dan Rumney, Jun 3, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    583
  2. oeyvind toft

    get methods of DOM objects

    oeyvind toft, Sep 9, 2004, in forum: Javascript
    Replies:
    4
    Views:
    159
    oeyvind toft
    Sep 9, 2004
  3. Adam Tilghman

    Creating SELECT MULTIPLE via DOM methods

    Adam Tilghman, Dec 15, 2005, in forum: Javascript
    Replies:
    6
    Views:
    88
  4. anagai
    Replies:
    1
    Views:
    154
  5. DOM ? HTML DOM

    , Dec 19, 2007, in forum: Javascript
    Replies:
    1
    Views:
    149
Loading...

Share This Page