如何检测 HTML 元素的类何时发生变化？ [复制]答案

【问题标题】：How can I detect when an HTML element’s class changes? [duplicate]如何检测 HTML 元素的类何时发生变化？ [复制]
【发布时间】：2011-08-27 09:50:29
【问题描述】：

<div class="current"></div>
<a href="#">text</a>

我如何检测一个.live 类被添加到这个<div> 并在它发生时做些什么？

例如，如果类更改，则隐藏链接。

我有一个对<div> 的类进行更改的缩小脚本。它太大了，我找不到它发生的地方，所以我正在寻找一些方法来捕捉班级变化。

【问题讨论】：

哪个区块？ .current?
一个简单的方法总是使用setInterval每隔这么多毫秒检查一次差异。
我遇到了类似的问题，但不同的是您正在寻找跟踪类更改，但我不仅要检查静态 dom 元素的属性更改，还要检查动态添加的 DOM 元素的属性更改，请点击此链接stackoverflow.com/a/58501827/6879925希望这能帮助您解决您的问题

标签： javascript jquery html css class

【解决方案1】：

有 DOM 事件，但它们远非完美，并且在大多数浏览器中不可用。换句话说：不可能（可靠）。有像间隔这样的技巧，并在每次迭代中检查它，但如果你需要做这样的事情，你的设计可能会搞砸。请记住，这样的事情会很慢，而且总会有延迟。延迟越小，应用程序越慢。不要那样做。

【讨论】：

我记不太清了，但我看到一篇关于 Mozilla Dev Central 的文章警告不要使用这些事件（主要是性能问题）。
这不是真的，它是可能的，而且是可靠的，它只需要你监听所有的 DOM 事件并将它们过滤掉。在你的情况下，专门听身体的孩子 $(document).on("EVENT","body *", function());这将是一项昂贵的操作，所以我建议不要这样做，但绝对可行且可靠
@TobiasHagenbeek：您会监听哪个事件来检测类属性更改？据我所知，on() 利用事件冒泡来检测元素的子元素中的事件——而不是 DOM 变化。但是，如果浏览器 DOM 事件是不可靠的（在撰写本文时肯定是这样），那么这将无助于完成 OP 所要求的而不诉诸间隔黑客。其中一些情况可能已经改变，所以我真的很好奇这将如何实现。请详细说明。
视情况而定，我会随时要求您控制代码，以便您知道添加类时会发生哪些事件。检查这个想法gist.github.com/yckart/c893d7db0f49b1ea4dfb
@TobiasHagenbeek：引用的 sn-p 修改 jQuery 以在使用其类操作函数时触发自定义事件。这不适用于对 DOM 类属性的任意更改，但仅适用于通过公共 jQuery API 进行的更改。对于 reliable 更改检测（即无论您自己的代码是否导致更改），将需要像（现已弃用）DOMAttrModified 或更新的 Mutation Observer API 这样的事件。但是，目前所有广泛使用的浏览器都没有这些功能。

【解决方案2】：

您可以查看following article 以获得一些想法。

【讨论】：

【解决方案3】：

我不知道您添加到链接的类是否始终相同，但如果是，您为什么不为此使用 CSS。

<style type='text/css>
  .myaddedclass{display:none}
</style>

【讨论】：

是的。 @Rooney，如果您只想隐藏/显示元素、更改颜色或其他属性等，那么只需将 CSS 定位在您正在添加的类中，您根本不需要监视更改。 CSS会为你做这件事。这就是我处理隐藏/显示、标记“当前选定”行和类似问题的方式。

【解决方案4】：

如果您只需要解决一次（即不在代码中），Google Chrome 的网络检查器会实时显示 DOM 更改。不过，不确定这是否有助于解决您的情况。

【讨论】：

+1 您也可以右键单击（在“元素”选项卡中）中的节点，然后单击“属性修改中断” - 这应该会在正确的行停止 JS。（取消缩小以获得更好的换行符：jsbeautifier.org）
@peteorpeter：哦，这真的很方便，我不知道。
我自己发现了它（谁知道它已经存在了多久 - 偷偷摸摸的 Chrome 更新......）
@peteorpeter：我知道。午餐时间到了吗？因为如果是，那么 Chrome 可能在另一个主要版本上。