HTML 在不使用setInterval的情况下检测类变化

在本文中，我们将介绍如何使用HTML来在不使用setInterval的情况下检测类的变化。在开发Web应用程序时，经常需要根据元素的类的变化来执行某些操作。通常，我们可以使用setInterval函数来定期检测元素的类是否发生变化。然而，使用setInterval存在一些缺点，例如可能会加重浏览器的负担，对性能产生负面影响。因此，我们需要一种更有效的方式来检测类的变化。

阅读更多：HTML 教程

使用MutationObserver来检测类变化

MutationObserver是一种用于监视DOM树变化的API。它可以在DOM发生变化时触发回调函数。我们可以利用MutationObserver来检测元素的类是否发生变化。

以下是一个示例，展示了如何使用MutationObserver来检测元素类的变化：

<!DOCTYPE html>
<html>
  <head>
    <title>Detecting Class Change Without setInterval</title>
  </head>
  <body>
    <div id="myDiv" class="originalClass"></div>

    <script>
      // 创建MutationObserver对象，传入回调函数作为参数
      const observer = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            console.log('Class changed:', mutation.target.className);
          }
        }
      });

      // 监视目标节点
      const targetNode = document.getElementById('myDiv');
      observer.observe(targetNode, { attributes: true });

      // 修改类名，触发变化事件
      setInterval(() => {
        targetNode.classList.toggle('newClass');
      }, 1000);
    </script>
  </body>
</html>