SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.getElementByClass?

    Is there any way to use document.getElementById but for classes? getElementById sure is useful but sometimes you need to get at a class instead and you can't always change it to an id.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. But it is easy enough to write your own function. Get all the elements you are interested in checking, look at the class attribute of the elements, e.g. if(elmt.class == "theClass"), and then add the matching elements to an array. Return the array.

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are many available. Here's mine: xGetElementsByClassName

  5. #5
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    There are many available. Here's mine: xGetElementsByClassName
    For browsers that support xpath, isn't it a lot faster to use that?

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    kyberfabriken, yes, xpath is the fastest solution. Firefox 3 will have (available in trunk builds) a native implementation that will be even faster!

  7. #7
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Firefox 3 will have (available in trunk builds) a native implementation that will be even faster!
    You mean a native implementation of getElementByClass? How's the API going to look?

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out the WHATWG specification

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi kyber,

    That's a great suggestion. I'm going to start looking into that.

    Thanks

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This might be interesting for you guys.

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    xGetElementsByClassName/XPath Testing

    kyber and Pepe: Thanks for the ideas and links. I made a test page - there are two test links ("Test 1" and "Test 2") in the upper-left corner of the page. Here are my results.
    Code:
    Test 1, Original implementation, Elapsed times:
     Op:  16,32,
     FF:  16,31,46,
     IE7: 78,125
     IE6: 90,109,110,130
    
    Test 2, Test implementation, Elapsed times:
     Op:  0,15,16
     FF:  0,15,16,
     IE7: 78,94,109,110,125,
     IE6: 90,110,150,
    
    Browsers:
     On WinXP: Opera 9.10, Firefox 2.0, IE 7.
     On WinNT: IE 6.
    
    Notes:
     - The browsers must be cacheing something because it always
    takes longer when a test is ran just after reloading the page.
     - I clicked each test link repeatedly until the elapsed time
    became more consistent.
     - A zero elapsed time just means that it was too fast for my
    simple timing technique to measure (I think).
    Here's the test driver and the two functions:
    Code:
    function test(cls, num)
    {
      if (num == 1) { // Test 1
        startTime = new Date().getTime();
        xGetElementsByClassName(cls, document, '*',
          function(e){
            e.style.border = '1px dotted red';
          }
        );
        var et1 = new Date().getTime() - startTime;
        alert('Original implementation: ' + et1);/////
      }
      else {          // Test 2
        var startTime = new Date().getTime();
        xGetElementsByClassName2(cls, document,
          function(e){
            e.style.border = '1px dotted blue';
          }
        );
        var et2 = new Date().getTime() - startTime;
        alert('Test implementation: ' + et2);/////
      }
    }
    
    function xGetElementsByClassName(c,p,t,f) // original implementation
    {
      var r = new Array();
      var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
      var e = p.getElementsByTagName(t);
    //  var e = xGetElementsByTagName(t,p); // See xml comments.
      for (var i = 0; i < e.length; ++i) {
        if (re.test(e[i].className)) {
          r[r.length] = e[i];
          if (f) f(e[i]);
        }
      }
      return r;
    }
    
    function xGetElementsByClassName2(c,p,f) // test implementation
    {
      var e, i, r = new Array();
      if (!p) p = document;
      if (document.evaluate) {
        var x = document.evaluate(".//*[contains(concat(' ', @class, ' '), ' " + c + " ')]", p, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
        for (i = 0; i < x.snapshotLength; i++) {
          r[r.length] = x.snapshotItem(i);
          if (f) f(x.snapshotItem(i));
        }
      }
    /*
      else if (p.getElementsByClassName) { // FF3 ?
        r = p.getElementsByClassName(c);
      }
    */
      else {
        var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
        e = p.getElementsByTagName('*'); // not for IE5
        for (i = 0; i < e.length; ++i) {
          if (re.test(e[i].className)) {
            r[r.length] = e[i];
            if (f) f(e[i]);
          }
        }
      }
      return r;
    }
    Everyone's feedback and further browser tests would be very much appreciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •