为什么使用公共类名操作带有两个CSS类的元素时功能不生效？

问题原因 #

• document.querySelector() 方法本身的设计是仅返回匹配指定选择器的第一个DOM元素，你页面中有两个带有opt-in类的input元素，该代码只会选中第一个用户名输入框，最多只能清空第一个的内容，第二个密码输入框完全没有被命中和处理，所以看起来没有达到清空两个输入框的预期效果。
• 你单独使用.close-acc-pin和.close-acc-usr作为选择器时，是分别精准选中了两个不同的输入框逐个清空，所以可以正常运行。

正确实现方式 #

如果想要批量清空所有带有opt-in类的输入框，使用document.querySelectorAll()匹配所有符合条件的元素，再遍历赋值即可：

// 选中所有带.opt-in类的元素，遍历清空
document.querySelectorAll('.opt-in').forEach(inputEl => {
  inputEl.value = '';
})

内容的提问来源于stack exchange，提问作者Blue