Faster Method to determine whether an element with a class exists?

Question

Description:

I was trying to find out a method to check whether an element with specific class exists.

Then I encountered this code:
```
if ($(".mydivclass")[0])
{
   // Do something if class exists
} 
else 
{
   // Do something if class does not exist
}
```
Which states that if there is a true value at the first ([0]) index, then assume class exists.
Now again I can find another solution like:
```
if ($(".mydivclass").size())
{
     // code here
}
```
The size() method just returns the number of elements that the jQuery selector selects - in this case the number of elements with the class mydivclass. If it returns 0, the expression is false, and therefore there are none, and if it returns any other number, the divs must exist.

So my question lies, which one of these two is the faster one?

possible duplicate of [Check if div with certain class name exists](http://stackoverflow.com/questions/5783280/check-if-div-with-certain-class-name-exists) also, in the answer you can find this: http://jsperf.com/check-if-div-exists — Joel Almeida, Jun 05 '15 at 08:12
For your information `size()` has been deprecated from `jquery 1.8` — Med, Jun 05 '15 at 08:14
Open the jsperf link and test . `$(".mydivclass")[0]` is fastest. http://jsperf.com/check-if-div-exists — Joel Almeida, Jun 05 '15 at 08:14
@JoelAlmeida, Thanks... actualy you marked my question as duplicate.. But my question and the one you referred aren't the same. — Saswat, Jun 05 '15 at 08:15

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

$('.mydivclass')[0] is the fastest way.

Sources:

Performance test:

http://jsperf.com/check-if-div-exists

Related question:

Check if div with certain class name exists

edited May 23 '17 at 12:14

Community

1
1

answered Jun 05 '15 at 08:19

Joel Almeida

7,939
5
25
51

score 0 · Answer 2 · answered Jun 05 '15 at 08:39

So I am curious also, and I did some test for following 5 methods:

$('.className')[0]
$('.className').size()
$('.className').length
document.querySelector('.className')
document.getElementsByClassName('className')[0]

my scripts:

var testCount = 100000;
var cn = 'container';
var cns = '.'+cn;
console.time('[0]');
for(var i=testCount;i>0;i--){
    if($(cns)[0]){};
}
console.timeEnd('[0]');

console.time('.size');
for(var i=testCount;i>0;i--){
    if($(cns).size()){};
}
console.timeEnd('.size');

console.time('.length');
for(var i=testCount;i>0;i--){
    if($(cns).length){};
}
console.timeEnd('.length');

console.time('querySelector');
for(var i=testCount;i>0;i--){
    if(document.querySelector(cns)){};
}
console.timeEnd('querySelector');

console.time('classname');
for(var i=testCount;i>0;i--){
    if(document.getElementsByClassName(cn)[0]){};
}
console.timeEnd('classname');

I do the test in this page, just pasting the code and run it in chrome console. And it turns out that the first 3 methods have similar performance, only difference by <100 ms.

querySelector method is fast when the class exist but slowest when class is not exist...Don't know why it is like this.

The getElementsByClassName method are fastest, only takes 1/10 time of the first 3 method.

this is one of the result:

[0]: 2168.198ms 
.size: 1951.075ms 
.length: 1936.117ms 
querySelector: 672.186ms 
classname: 242.048ms

and to answer your question, I think the two do not really have a faster one, both slow for this purpose...

`getElementsByClassName` will always be faster because it's plain javascript and doesn't use jQuery at all. Plain javascript methods are always faster than jQuery. — Joel Almeida, Jun 05 '15 at 08:41

Faster Method to determine whether an element with a class exists?

Description:

2 Answers2