Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

4 different ways of changing the appearance of multiple matched elements with JavaScript or jQuery - Demo and Performance Benchmark

Daniel Gheorghe Difficulty: 25 / 50 Tweet

This article is old. Be careful! It might contain outdated information.
Here's an alternate resource that I am recommending for this topic.

the right tool for each job

Recently I have been doing some front-end development for one of my California based clients. Among other things, I had to apply a few performance tweaks to the existing code and I thought it would be a good idea to write an article on the topic. When coding there is no single solution to solve all problems it's more a matter of choosing the right tool for the right job.

The client had over one hundred product containers on the same page and he wanted to change the appearance of all containers except the one the visitor was hovering on.

The old developer was using plain JavaScript to loop through a set of matched elements and change the className property for each thus achieving the required result. In this tutorial I will show you how he wrote the code and then three alternative methods of achieving the same results much faster.

To better prove my point I have devised a similar scenario increasing the number of HTML elements from 100 to 10.000 and benchmark-ed everything in this demo. All 4 scripts have the same outcome - they change the background color of each element.

The worst method (around 1.5 seconds)

The old coders approach is (at least from my tests) the worst by far. It stores all matched elements in an array and loops through each applying the required className to each. This is incredibly slow as you can see from the benchmark.

  
    <script>
    var Elements = document.getElementsByClassName('myelement');
    for(i=0;i<Elements.length;i++)
      Elements[i].className = 'myelement blue';
    </script>
  

The bad method (around 60 milliseconds)

Another possibility of doing this, similar to the one above, would be to use jQuery's built in each() function. This will practically do the same as the above but it's much faster than the native JavaScript approach.

  
    <script>
    jQuery('.myelement').each( function(i,v) {
       jQuery(this).attr('class', 'myelement red'); 
    });
    </script>
  

The good method (around 1 millisecond)

The "each" approach is not even necessary because jQuery will apply the required change to all elements matching the class selector without the need of looping through them. This is of course way faster than the above.

  
    <script>
      jQuery('.myelement').attr('class', 'myelement purple');
    </script>
  

The fastest method (less than 1 millisecond)

There is no built in method in plain JavaScript to automatically apply a change to multiple elements returned through getElementsby* functions. However there is a very simple way to get around that: Changing the class name of a parent element and use CSS to alter the appearance of the child elements.

  
    <script>
      document.body.className = 'myelementisorange';
    </script>
  

A demo with the 4 code versions and a counter to show how much time it takes for each to get executed.

comments powered by Disqus