表达式不能是选择器(出现在点之后) - Javascript

在Javascript中，我们经常使用DOM Manipulation来操作HTML元素。其中，常见的一个操作就是给元素添加或者删除class。比如，我们可以通过下面的代码给一个元素（假设其id为"example"）添加一个名为"active"的class：

var element = document.getElementById("example");
element.classList.add("active");

不过，在使用类似于 element.classList.[add|remove|toggle|replace] 这些方法来操作class时，很多人可能会犯一个比较常见的错误，那就是把选择器放到class名字的后面，比如：

var element = document.getElementById("example");
element.classList.add("active .hidden");

这段代码的意思是，给id为"example"的元素添加名为"active .hidden"的class。但是，实际上，这段代码并不会起作用，而且还会引发一个语法错误："表达式不能是选择器(出现在点之后) "。

这个错误的原因在于，class应该仅仅是一个名称，而不是一个选择器。也就是说，class名字中不能包含类似于"."、"#"等符号，这些符号只有在CSS选择器中才能使用，例如：

<div id="example">
  <h2 class="my-heading">Hello, World!</h2>
</div>

这里，我们为<h2>元素添加了一个名为"my-heading"的class。在CSS中，我们可以这样使用它：

.my-heading {
  font-size: 24px;
}

注意到这里使用了"."符号来引用class。但是，如果你在Javascript中使用类似于下面这样的代码：

var element = document.getElementById("example");
element.classList.add(".my-heading");

那么，"my-heading"实际上会被作为一个选择器来解析，而不是一个普通的class名字。因此，你需要把"."符号去掉，正确的代码应该是这样的：

var element = document.getElementById("example");
element.classList.add("my-heading");

在实际的开发过程中，不要把class名字和选择器搞混，这样会引起很多问题。同时，要注意这种常见的语法错误，不要把选择器放到class之后。

参考链接

• MDN - Element.classList