Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
classList.contains vs. className.indexOf
(version: 0)
Comparing performance of:
Use hasClass shorthand vs Use classList
Created:
7 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo" class="bar baz"></div>
Script Preparation code:
var test_element = document.getElementById("foo");
Tests:
Use hasClass shorthand
var result = test_element.className.indexOf("bar") != -1;
Use classList
var result = test_element.classList.contains("bar");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Use hasClass shorthand
Use classList
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 what's being tested in this benchmark. **Benchmark Definition** The benchmark is comparing two approaches to check if an element has a specific class: `className.indexOf` and `classList.contains`. These methods are used to achieve the same goal, but with different syntax and semantics. **Options Compared** The two options being compared are: 1. **`className.indexOf`**: This method searches for the specified value in the `className` property of an element. If found, it returns the index of the occurrence; otherwise, it returns -1. 2. **`classList.contains`**: This method checks if a specific class is present in the `classList` property of an element. **Pros and Cons** ### `className.indexOf` Pros: * Shorter syntax * Can be used to check for multiple classes by chaining calls (e.g., `element.className.indexOf('bar') && element.className.indexOf('baz')`) * Works with older browsers that don't support `classList` Cons: * Less efficient than `classList.contains` because it performs a linear search * Returns the index of the first occurrence, not just whether the class is present ### `classList.contains` Pros: * More efficient than `className.indexOf` * Returns only whether the class is present, without unnecessary indexing information * Works with modern browsers that support `classList` Cons: * Longer syntax * May not work as expected if the class name contains spaces or special characters (as it simply performs a substring search) **Library Used** In this benchmark, the `classList` property is being used, which is a part of the DOM Standard (ECMAScript 2015). The `classList.contains` method is a built-in method that allows checking for class presence in modern browsers. **Special JS Feature or Syntax** This benchmark uses the ES6 `classList` API, which is a newer feature introduced in ECMAScript 2015. This API provides a more efficient and convenient way to work with classes in JavaScript. **Other Alternatives** If you need to support older browsers that don't support `classList`, you can use alternative methods such as: * Using regular expressions (`element.className.match(new RegExp('\\bbar\\b'))`) * Using the `indexOf` method on the class names array (`element.className.indexOf('bar') === -1`) * Creating a custom function to check for class presence However, these alternatives may not be as efficient or convenient as using `classList.contains`. In summary, this benchmark is testing the performance difference between two approaches to check if an element has a specific class: `className.indexOf` and `classList.contains`. The latter is more efficient and modern, but requires longer syntax.
Related benchmarks:
Has Class
className.indexOf vs. classList.contains 1
classList.contains vs. a
long vs short classlist contains
Comments
Confirm delete:
Do you really want to delete benchmark?