Что использовать для манипуляции с css классами — classList, getAttribute, className?

Question

[Алексей Алексеев]

Стоит задача изменить название css классов у элементов с kebab-case на camelCase.
У меня на эту задачу есть несколько решений, какое использовать лучше или может быть ни одно не верно?

document.body.querySelectorAll('*').forEach((element) => {
    if (element.hasAttribute('class')) {
      element.setAttribute('class', kebabCaseToCamelCase(element.getAttribute('class')));
    }
  });

document.body.querySelectorAll('*').forEach((element) => {
  if (element.classList.length) {
      element.classList.value = kebabCaseToCamelCase(element.classList.value);
  }
});

document.body.querySelectorAll('*').forEach((element) => {
        if (element.tagName === 'svg' && element.getAttribute('class')) {
          element.setAttribute(
            'class',
            kebabCaseToCamelCase(element.getAttribute('class')),
          );
        } else if (element.className) {
          element.className = kebabCaseToCamelCase(element.className);
        }
      });

document.body.addEventListener('click', () => {
        document.body.querySelectorAll('*').forEach((element) => {
          const currentClassesNames = [...element.classList];
          const transformedClassesNames =
            currentClassesNames.map(kebabCaseToCamelCase);
          element.classList.remove(...currentClassesNames);
          element.classList.add(...transformedClassesNames);
        });
      });

Answer 1

[Stalker_RED]

Сработают все.
Я бы писал как-то так:

document.querySelectorAll('[class]').forEach(elem => 
  elem.className = elem.className.replace(/-([a-z])/g, (a,b) => b.toUpperCase())
);

Надеюсь, что это у вас разовая задача "для поиграться", и вы не будете тащить это в прод.

Comments

[Алексей Алексеев]

Это задача в качестве обучения.
className для svg вернет объект.
Можно ли в полной мере пользоваться classList.value вместо className?