从类列表中删除活动类并使用 Javascript 附加到当前元素

在编写前端代码时，经常需要操作 HTML 元素的类列表来改变样式或实现交互等功能。本文将介绍如何从类列表中删除活动类并使用 Javascript 附加到当前元素以实现一些功能。

删除活动类

在 HTML 元素的类列表中，可以使用 classList 属性来访问类列表，进行增加、删除、切换和查找等操作。其中 classList 属性返回的是一个 DOMTokenList 对象，它的 remove() 方法可以删除指定类名。

// 获取当前活动元素
var activeElement = document.querySelector('.active');

// 从类列表中删除活动类
activeElement.classList.remove('active');

在上述代码中，首先我们使用 querySelector() 方法获取了当前活动元素，然后在其类列表中使用 remove() 方法删除了名为 active 的类名。

使用 Javascript 附加到当前元素

当我们需要使用 Javascript 对当前元素进行操作时，可以使用 document.currentScript 属性获取到当前正在执行的脚本元素，进而访问其父元素并进行附加操作。

<div class="container">
  <script>
    // 获取当前脚本元素
    var scriptElement = document.currentScript;
  
    // 获取当前脚本元素的父元素
    var containerElement = scriptElement.parentNode;
  
    // 附加新元素
    var newElement = document.createElement('div');
    newElement.textContent = 'Hello, world!';
    containerElement.appendChild(newElement);
  </script>
</div>

在上述代码中，我们首先使用 document.currentScript 属性获取了当前正在执行的脚本元素，然后访问其父元素来进行附加操作。其中我们使用 document.createElement() 方法创建了一个新的 div 元素，并使用 appendChild() 方法将其添加到了父元素中。在新元素中我们添加了一些文本内容以展示其效果。

通过以上操作，我们可以实现一些类似于 DOM 操作的功能，从而实现更加灵活和强大的页面展示和交互。