给元素添加 / 移除 class

题目:实现 addClassName(node, cls) 给元素加 class、removleClassName(node, cls) 移除 class,对同一个 class 重复添加要去重。

  <body>
    <a class="container box list"></a>
    <script>
      function addClassName(node, cls) {

      }
      function removleClassName(node, cls) {

      }
      const a = document.getElementsByTagName("a")[0];
      addClassName(a, "bbb");
      removleClassName(a, "box");
      removleClassName(a, "bbb");
    </script>
  </body>
      function addClassName(node, cls) {
        let classN = node.className + ` ${cls}`;
        node.setAttribute("class", classN);
      }

      function removleClassName(node, cls) {
        let classN = node.className.replace(new RegExp(` ${cls}`, "g"), "");
        node.setAttribute("class", classN);
      }

      const a = document.getElementsByTagName("a")[0];
      addClassName(a, "bbb");
      removleClassName(a, "box");
      removleClassName(a, "bbb");

补充

补充:addClass 思路是先把当前 className 与新 class 拼成字符串再 setAttribute;移除时用正则把对应 class 抠掉。

更现代的做法是直接用 element.classList.add/remove,语义更清晰、自动去重。