加载页面后，如何跟踪HTML页面内容的更改

我为这件事绞尽脑汁

在浏览器中加载HTML文档后，我希望能够监视 以防页面上的任何内容因任何原因发生更改

是否有一个Javascript函数可以用来跟踪“发生了什么？” 网页上的“已更改”。这应该与HTML页面上的内容类型无关

我有两个例子供大家思考：

例1： 假设在HTML文档中有两个选择框s1和s2。 s2中的项目列表取决于s1中的选择（第页未显示 刷新-也就是说，s2是通过Ajax或其他方式加载的）。 因此，在加载HTML页面后，我需要随时收到通知 已填充

例2： 比如说，在一个HTML页面中，有一个链接，点击它就会弹出一个很亮的窗口 div是用一些文本创建的。 如何捕获此动态弹出窗口的内容

在所有这些讨论中，我没有考虑任何特殊的因素 HTML格式…HTML内容可以是任何内容…我只需要 若要在页面加载后继续跟踪任何内容的更改

理想情况下，我需要使用JavaScript（客户端）实现这一点 脚本）。

---

如何实现这一点？

您可以使用onkeyup跟踪文本框中的更改。每当有人在给定的文本框中进行更改时，这将告诉您

---

这可能引发很多事件。但是，使用onblur不一定会告诉您文本框中的更改，而且onchange的浏览器覆盖范围充其量也是零碎的。

如果您使用的是AJAX，您可以设置响应函数来处理自制的“事件侦听”系统。因此，在响应完成它需要做的事情之后，它可以调用任何注册的方法，在必要时传递响应文本

从上面的例子来看，在Ex1中，当AJAX从S1返回时，它将加载S2，然后调用一个表示S2已更改的方法。在Ex2中，当新的AJAX返回DIV的内容时，在将其加载到DIV中之后，它会调用一个不同的方法（或者根据您的尝试调用相同的方法），并提醒它DIV有新内容

您可以将“watcher”脚本设置为计时器，在当前document.body.innerHTML和加载时捕获的存储版本上运行diff函数。根据diff的运行速度，您可以知道使用什么定时器间隔

这可能无法捕获表单元素中的更改，但对于这些更改，更容易在页面上的每个表单中遍历所有表单元素

---

这是我在谷歌上找到的某个人的diff函数：

onkeyup将捕获用户在框中输入时的更改，但是如果textox由页面上的外部事件填充……比如一个“用户输入的总和”的文本框，它会根据其他文本框的输入自动填充……那么这个内容将永远不会被删除捕获：（…我要寻找的是一个适用于所有情况或大多数情况的通用解决方案如果我当时不知道ajax调用的确切性质，那么我就没有办法处理响应。我要寻找的解决方案是通用的，适用于任何类型的内容更改，无论是文本节点还是表单元素的值。