JSでcssのクラスを追加・削除する方法(Jqueryを使わない）

JavascriptでClassを追加・削除する方法を毎回忘れてしまうので、
備忘録として記載残しておきます。

.index.html

  <style>
    .addclass {
      color: red;
    }
  </style>
  <button id="addButton" onclick="addclass()">テスト文字です</button>
  <button onclick="delclass()">クラス削除</button>

  <script>
//#addButtonへクラスを追加します
    function addclass() {
      const buttonstyle = document.getElementById("addButton");
      buttonstyle.classList.add("addclass");
    }
//クラスを削除します
    function delclass() {
      const buttonstyle = document.getElementById("addButton");
      buttonstyle.classList.remove("addclass");
    }
  </script>

jQueryに慣れてしまうといざというときにできなかったりするのでメモしておきます。