event.target.classList没有indexOf方法

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>

我期望打印上面的代码片段,0但它抛出了一个错误lo.indexOf is not a function.

event.target.classList不是作为数组输入的吗？

Answer 1

没有indexOf方法,classList是arrayLike对象.但有contains()一个:

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

Answer 2

该classList属性是一个DOMTokenList集合,它没有.indexOf()方法.以下是一些选项:

选项1

DOMTokenList使用Array.from()要检查的方法将集合转换为数组:

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

选项#2

使用该classList.contains()方法检查:

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

选项#3

由于该.indexOf()方法存在于数组中,因此您可以使用该.call()方法来使用classList(其中字符串'name'是您正在检查的类)来调用该方法:

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

选项#4

此选项具有最多的浏览器支持,因为所有浏览器都支持该className属性.

该className属性返回元素类的字符串.您可以使用正则表达式来测试字符串是否包含所需的类(这涵盖了类name是唯一类的实例,以及name当有多个类时类被空格分隔).

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

你也可以把它变成一个函数:

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

选项#5

如果您正在使用jQuery,只需使用该.hasClass()方法:

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