JavaScript 中的样式 classList 与 className

Question

我有两个 DOM 元素，A 和 B，我想从 A 中获取所有样式类，并将它们附加到 B。

我知道我可以通过这种方式将新类附加到元素，而无需擦除现有类：

B.classList.add("cls1", "cls2", "cls3");

或者这样：

var clsa = ["cls1", "cls2", "cls3"];
B.classList.add(...clsa);

现在，我的问题是，如何以clsa 数组的形式获取 A 中的类列表？

• 我可以通过使用A.className 属性来做到这一点，然后将其拆分为一个数组。

• 或者我可以简单地将A.className 附加到B.className，就像：

  B.className += A.className;
  

• 或者我可以迭代A.classList对象的组件，0: ... N:。

第二个看起来最自然。然而，有一种感觉， classList，而不是 className，是对象样式类的首选“家”。对吗？

如果是这样，是否有任何优雅而清晰的方法可以做到这一点，而无需使用 className？

可能是这样的：

B.classList.add(...A.classList.all);

Answer 1

不明显，但似乎可以在 Chrome 中使用：

B.classList.add(...A.classList);

Answer 2

您可以先尝试将 classList 转换为一个数组，就像在 Why doesn't .includes() work with .classList? 中回答的那样，然后使用扩展运算符追加。

B.classList.add([...A.classList]);