Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Has Class
(version: 0)
Determining which method to check if an element has a specific class.
Comparing performance of:
ClassList Contains vs ClassName IndexOf
Created:
7 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div class='test some stuff here' id='test'></div>
Script Preparation code:
var elem = document.getElementById('test');
Tests:
ClassList Contains
var has = elem.classList.contains('stuff');
ClassName IndexOf
var has = (' ' + elem.className + ' ').indexOf(' stuff ');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
ClassList Contains
ClassName IndexOf
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what is being tested. **Benchmark Definition** The benchmark tests two different methods to check if an HTML element has a specific class: `classList.contains()` and `indexOf()`. The goal is to determine which method is faster, more efficient, or more accurate. **Script Preparation Code** The script prepares an HTML element with the ID "test" using `document.getElementById('test')`. **Html Preparation Code** The HTML code creates a `<div>` element with the class "test some stuff here" and assigns it the ID "test". **Individual Test Cases** There are two test cases: 1. **ClassList Contains**: This method checks if the element has a specific class by using `elem.classList.contains('stuff')`. 2. **ClassName IndexOf**: This method checks if the element's class name contains a specific substring by using `(' ' + elem.className + ' ').indexOf(' stuff ')`. **Pros and Cons of each approach** 1. **ClassList Contains**: * Pros: Easy to read, intuitive, and well-supported by modern browsers. * Cons: May be slower than the `indexOf()` method due to the additional function call and potential substring creation. 2. **ClassName IndexOf**: * Pros: Can be faster for certain use cases, as it avoids the extra function call and potentially slower string concatenation. * Cons: Less intuitive and less supported by older browsers. **Library** None of these test cases explicitly uses a JavaScript library. However, if we consider the standard library functions provided by modern browsers, `elem.classList.contains()` is part of the W3C specification and widely supported. **Special JS feature or syntax** The test case `(' ' + elem.className + ' ').indexOf(' stuff ')` demonstrates the use of string concatenation with template literals (although this was introduced in ECMAScript 2015, it's a relatively recent feature). Additionally, the use of the `indexOf()` method with a substring is an old-school approach that might be familiar to some developers. **Other alternatives** If we consider alternative methods for checking if an element has a specific class: 1. **CSS attribute selector**: You can also check if an element has a specific class by using CSS attribute selectors, such as `div#test[class="stuff"]`. 2. **Regular expressions**: Another approach is to use regular expressions to match the class name, although this might be overkill for simple cases. 3. **For loop with a counter array**: You can also iterate through an array of classes and compare them using a for loop. Keep in mind that these alternatives might have different performance characteristics or require additional setup. Overall, the test case provides a good starting point to compare two common methods for checking if an element has a specific class.
Related benchmarks:
classList.contains vs.
Has Class With Cache
Has Class Function
classList.contains vs. shorthand
Comments
Confirm delete:
Do you really want to delete benchmark?