Стиль classList против className в JavaScript

Question

У меня есть два элемента DOM, A и B, и я хочу получить все классы стилей от A и добавить их к B.

Я понимаю, что могу добавлять новые классы к элементу, не стирая существующие вот так:

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

или вот так:

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

Теперь у меня вопрос, как мне получить список классов в А в виде clsa массив?

• Я могу сделать это, используя свойство 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

Вы можете сначала попытаться привести classList к массиву так, как на него ответили Почему .includes () не работает с .classList? , а затем добавить, используя оператор распространения.

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

Answer 2

Неочевидно, но, похоже, работает в Chrome:

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