Get the value of the name attribute of each element with class="class"

I need a function to get the value of the name attribute of each element with class="class". I was wondering what is the best way to do this, performance-wise.

Currently I'm using jQuery and doing it like this:

$("#Button").click(function() {
    var myElements = $(".class");
    for (var i=0;i<myElements.length;i++) {
        alert(myElements.eq(i).attr("name"));
    }
});

Alert is just to show what it does, of course. For the following HTML:

It would issue:

alert("1")
alert("3")

I was wondering if using pure Javascript would be faster, or if there is any other (better) way of doing it. I apologize if this question is not on this website's scope, please move it to Stackoverflow if that's the case.

Pure JS vs jQuery

Pure JavaScript will be significantly faster as you can see by this jsPerf which pits document.getElementByClassName vs the jQuery selector. Here are the results for Chrome 25:

• $('.class') - 4355 operations per second

• getElementsByClassName('class') - 94636 operations per second

As you can see, for this simple operation the jQuery option is approximately 22 times slower than the pure-JavaScript equivalent. You can easily see why this is the case by checking out the jQuery development source, since the jQuery 'selector function' is so general it needs to do a lot of checks to see what the input is before it can act upon it.

Pure JS implementation

I've left the jQuery click event in as it looks like you already have a dependency on jQuery so no point changing the way you're hooking up your events.

jsFiddle

$("#Button").click(function() {
    var items = document.getElementsByClassName('class');
    for (var i = 0; i < items.length; i++)
        alert(items[i].name);
});

getElementsByClassName

Also note that I used getElementsByClassName. It is pretty important to choose the ideal selector if you care about performance. Since we care about all elements with a certain class we can immediately dismiss the others like getElementsByTagName and querySelectorAll and opt for the function that was built for finding elements of a particular class.

jQuery implementation

This would be my implementation using jQuery, notice that I didn't bother getting the jQuery object for this (ie. $(this)) because the plain JavaScript attribute is much easier in this case.

jsFiddle

$("#Button").click(function() {
    $(".class").each(function() {
        alert(this.name);
    });
});

StackExchange Code Review Q#24172, answer score: 9