Как заменить className на vanilla JS?

Question

Как я могу заменить className (Список) на Javascript? У меня есть этот код:

document.addEventListener("DOMContentLoaded", (e) => {
    const url = window.location;
    let urlReq = url.href;
    if(urlReq.includes('/home')){
        document.getElementById('default-sidenav-menu').className.replace('sidenav-main nav-expanded nav-lock nav-collapsible  sidenav-active-rounded  sidenav-dark', 'sidenav-main nav-collapsed nav-collapsible  sidenav-active-rounded  sidenav-dark');
        console.log(document.getElementById('default-sidenav-menu').className);
    }
});

это мой html:

<aside class="sidenav-main nav-expanded nav-lock nav-collapsible  sidenav-active-rounded  sidenav-dark" id="default-sidenav-menu">
    <div class="brand-sidebar">
    ...
</aside>

, но я все еще получаю имя класса по умолчанию: sidenav-main nav-expanded nav-lock nav-collapsible sidenav-active-rounded sidenav-dark, когда моя страница была загружена.

Какую ошибку я допустил?

Answer 1

document.getElementById('default-sidenav-menu').className.replace

Это означает, что вы заменяете строку другой строкой, потому что "className" - это просто строка, когда вы ее получаете.

document.body.className.constructor.name
=> "String"

Если вы хотите заменить ее, вам следует назначить новое имя класса, как это.

document.getElementById('default-sidenav-menu').className = 
 document.getElementById('default-sidenav-menu').className.replace("something", "something_new");

Answer 2

Вам не нужно заменять, просто присвойте строковые классы свойству className:

Свойство className объекта Интерфейс элемента получает и устанавливает значение атрибута класса указанного элемента.

Синтаксис:

elementNodeReference.className = cName;

Где:

cName - строковая переменная, представляющая класс или разделенные пробелами классы текущего элемента.

Демо:

document.addEventListener("DOMContentLoaded", (e) => {
  // other code
  document.getElementById('default-sidenav-menu').className = 'sidenav-main nav-expanded nav-lock nav-collapsible  sidenav-active-rounded  sidenav-dark', 'sidenav-main nav-collapsed nav-collapsible  sidenav-active-rounded  sidenav-dark';
  console.log(document.getElementById('default-sidenav-menu').className);
  // other code
});

<aside class="nav-lock nav-collapsible" id="default-sidenav-menu">
    <div class="brand-sidebar">
    </div>
</aside>