event.target.classList doesn't have indexOf method

Question

<script src="jquery.js"></script>
<button class="hello bello jello">start text</button>
<script>
$("button").on("click", function(event) {
    var lo = event.target.classList
    console.log(lo.indexOf("hello"))
})
</script>

I expected the above snippet to print, 0 but it threw out an error lo.indexOf is not a function .

Isn't event.target.classList typed as array?

Answer 1

There is no indexOf method, classList is arrayLike object. But there is contains() one:

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 2

The classList property is a DOMTokenList collection and it doesn't have a .indexOf() method. Here are a few options:

Option #1

Convert the DOMTokenList collection to an array using the Array.from() method to check:

var hasClass = Array.from(event.target.classList).indexOf('name') > -1;

Option #2

Use the classList.contains() method to check:

var hasClass = event.target.classList.contains('name');

Option #3

Since the .indexOf() method exists on arrays, you can use the .call() method to invoke the method with using the classList (where the string 'name' is the class you are checking):

var hasClass = [].indexOf.call(event.target.classList, 'name') > -1;

Option #4

This options has the most browser support since the className property is supported in all browsers.

The className property returns a string of the element's classes. You could use a regular expression to test if the string contains the desired class (this covers instances where the class name is the only class, and when the class name is separated by whitespace when there are multiple classes).

var hasClass = /(^| )name( |$)/i.test(event.target.className);

You could also just turn this into a function:

function hasClass (element, className) {
  return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}

Option #5

If you're using jQuery, just using the .hasClass() method :

var hasClass = $(event.target).hasClass('name');

Answer 3

As you're using jQuery, use hasClass() to check if the clicked element contains specified class.

Also, use $(this) inside event handler to refer to the element that is clicked.

Determine whether any of the matched elements are assigned the given class.

$("button").on("click", function(event) {
    console.log($(this).hasClass('hello'));
});

Answer 4

You can use indexOf() on a classList with the toString() function:

event.target.classList.toString().indexOf('hello')

Then you can use it as follows:

if (~event.target.classList.toString().indexOf('hello')) {
  // The target's class list contains the phrase 'hello'
}

---

Note: This will also return true for classes such as: helloworld and _hello_ (which is how indexOf() was intended to perform).