包含方法与严格相等

Question

todo.classList === 'completed 和 有什么区别 todo.classList.contains('completed')我不确定我是否误解了它们的用法或者我的代码写得不好，但我很困惑为什么后者选择具有完整类的元素而前者选择我的选择标签中的所有选项。

Answer 1

todo.classList === 'completed'和有什么区别todo.classList.contains('completed')

classList与字符串进行比较是没有意义的，因为它是一种类似数组的数据结构。去吧el.classList.contains(str)。

如果您确定您的元素只有一个 CSS 类，您可以这样做el.className === 'completed'，或者如果它至少保证是第一类，则el.classList[0] === 'completed'。但你不应该。

const todo = document.querySelector('div');

console.log(todo.className === 'completed'); // true

console.log(todo.classList.contains('completed')); // true

<div class="completed"></div>

Answer 2

以下是您可以与类列表一起使用的所有方法。Contains 将返回一个布尔值，以确定元素是否具有您传递的类。

Answer 3

.classList返回一个DOMTokenList。DOMTokenList与数组的工作方式类似，但没有它的所有 等等 很酷的东西.map()。.forEach()

todo.classList === 'completed'无法像您希望的那样将 aDOMTokenList与 a进行比较String。

todo.classList.value === 'completed'仅当唯一的类todo是completed. 这不应该被使用。

todo.classList.contains('completed')如果 will 的至少一类是 ，则将todo起作用completed。这是最好的方法。

以下是使用DOMTokenLists 时可能需要的一些技巧：

[...todo.classList]; //convert to array

todo.classList[0]; //unofficial way to get the nth class name

todo.classList.item(0); //standard way to get the nth class name

Answer 4

您的用法不正确。

包含可以与类列表一起使用。您不能直接将条件放在类列表方法上。

   event.target.classList.add('class3');

   event.target.classList.remove('class1');  

   event.target.classList.contains('class2'); // To check  class is present or not it returns boolean value.

   event.target.classList.toggle('class4');