使用查询选择器向多个元素添加类答案

【问题标题】：Adding class to multiple elements with querying selector使用查询选择器向多个元素添加类
【发布时间】：2021-11-19 15:10:33
【问题描述】：

我正在尝试减少冗长的classList.add('lorem') 通话。我可以轻松地将同一个类添加到多个创建的元素中，如下所示：

const loremDiv = document.createElement('div'), ipsumDiv = document.createElement('div')

loremDiv.classList.add('hi')
ipsumDiv.classList.add('hi')

但是当我尝试像这样通过单个 forEach 添加类时：

[loremDiv,ipsumDiv].forEach((el) => {
    el.classList.add('hi')
}

我收到以下错误： TypeError: Cannot read properties of undefined (reading 'forEach')

【问题讨论】：

根据您发布的代码应该没有这样的错误。
我打赌你没有用分号结束前面的语句，因此 [...] 被解释为属性访问。使用分号！语法不同，但原因相同：stackoverflow.com/q/41905600/218196
我猜你指的是没有分号的上一行？不确定你的评论。但我的代码没有此类错误，否则我的 linter 会抱怨。
@ZachSmith 你所要做的就是在[loremDiv, ipsumDiv] 之前加上一个分号before 来看看Kling 先生的假设是否正确。您的 linter 会抱怨语法错误，在这种情况下缺少分号不是 syntax 错误，而是 runtime 错误。
如前所述，代码在语法上是有效的，因此 linter 无法捕捉到该问题。 linter 无法知道您实际上并没有尝试访问属性，而是想要创建一个数组文字。我的意思是，它可以在技术上将包含逗号运算符表达式的属性访问标记为可疑。我想知道是否有一个 eslint 规则/插件。

标签： javascript

【解决方案1】：

正如其他人所提到的，您缺少重要的分号。 Felix 和 Pointy 都提出了有效的观点。真的没有必要省略分号。它可能看起来更时髦、更现代，但它会让你陷入困境并导致像这样的神秘错误。

失败

document.createElement 调用返回一个元素，但由于您没有包含分号，它会像这样进入下一行：

document.createElement('div')[loremDiv, ipsumDiv]

由于您没有终止 ipsumDiv 分配，解释器抱怨它尚未分配。

至于forEach((el) => el.classList.add('hi')) 调用，Array.prototype.forEach 不返回任何内容，因此您在undefined 对象上调用loremDiv。

forEach((el) => el.classList.add('hi'))[loremDiv, ipsumDiv]

const 
  loremDiv = document.createElement('div'),
  ipsumDiv = document.createElement('div') // Missing semi-colon!
  
// "Uncaught ReferenceError: Cannot access 'ipsumDiv' before initialization"

[loremDiv, ipsumDiv].forEach((el) => el.classList.add('hi')) // Missing semi-colon!

// "Uncaught TypeError: Cannot read properties of undefined (reading '#<HTMLDivElement>')"

[loremDiv, ipsumDiv].forEach((el) => document.body.append(el)) // Optional semi-colon

.hi:before { content: "HI!" }

工作

const 
  loremDiv = document.createElement('div'),
  ipsumDiv = document.createElement('div'); // Semi-colon required
  
[loremDiv, ipsumDiv].forEach((el) => el.classList.add('hi')); // Semi-colon required

[loremDiv, ipsumDiv].forEach((el) => document.body.append(el)); // Why not add one?

.hi:before { content: "HI!" }

【讨论】：