WebKit now natively supports getElementsByClassName, one of the most requested functions by JavaScript programmers.

Function getElementsByClassName

Parameters
String – String name of the Stylesheet class

Returns
Array of objects matched

Here’s a simple test:

This is a test div with class ‘testdiv’ without ID.

JavaScript for the above sample is following:

function changeColour() {
    if (!document.getElementsByClassName) {
        if (confirm("You need a compatible browser to run this test!")) {
            document.location.href = "http://nightly.webkit.org/";
        }
    } else {
        var elems = document.getElementsByClassName("testdiv");
        elems[0].style.backgroundColor = "#CCCCCC";
        elems[0].style.color = "#000000";
    }
}
function resetColour() {
    if (!document.getElementsByClassName) {
        if (confirm("You need a compatible browser to run this test!")) {
            document.location.href = "http://nightly.webkit.org/";
        }
    } else {
        var elems = document.getElementsByClassName("testdiv");
        elems[0].style.backgroundColor = "#FF0000";
        elems[0].style.color = "#ffffff";
    }
}

For those interested WebKit developers have also put up a benchmark to illustrate how superior native support is over any other possible solution.

NB! To test this functionality you need to download recent nightly of WebKit.

Share and bookmark:

  • Twitter
  • Technorati
  • StumbleUpon
  • Digg
  • Google Bookmarks
  • Facebook
  • MySpace
  • del.icio.us
  • Mixx
  • blogmarks
  • Live
  • NewsVine
  • Reddit
  • Slashdot
  • LinkedIn
  • FriendFeed
  • email