有没有一种方法可以追踪HTML元素的所有更改？

Question

有没有一种（好的）方法来跟踪HTML元素的所有更改？

我尝试使用JavaScript和jQuery，但它不起作用。

$('div.formSubmitButton input[type="submit"]').change(function(event){
                alert(event);
            });

一些提交按钮上设置了样式属性，但我找不到它是在哪里和如何设置的。

编辑：我的问题与jQuery无关。

- maazza

---

在您的浏览器文档检查器中查看？ - George

你如何“更改”提交按钮？ - adeneo

我想要拦截JS触发的更改，而不是看它是否已经被改变。@adeneo，当您执行$ SubmitInput.addClass（'this'）时会发生什么？ - maazza

可能是使用jQuery检测元素内容更改的重复问题。 - Jason Aller

Answer 1

您可以使用MutationObservers来跟踪对DOM元素所做的更改：

// select the target node
var target = document.querySelector('div.formSubmitButton input[type="submit"]');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }

// pass in the target node, as well as the observer options
observer.observe(target, config);

http://jsfiddle.net/2VwLa/

这将为您提供一个MutationRecord对象，其中包含有关更改的详细信息。有关变异的更多信息，请参见：https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

- Mircea

---

不要忘记在你得到所需的内容后注销你的观察者。我知道这是一个棘手的问题。 - Mircea

有没有一种方法可以为IE9 shim MutationObserver？似乎它还没有在IE中出现。 - Doug

Answer 2

你可以跟踪输入字段的更改或在提交时进行检查：

  $('form').submit(function(event){
     alert("this gets called when form submitted here you can test differences");
  });


  $('form input[type="text"]').change(function(event){
     alert("this gets called when and text input field gets changed");
  });

此外，您还可以检查特定输入字段上的键盘输入。

  $('form input[type="text"]').keydown(function(event){
     alert("this gets called on key board input before the data is inserted in input field");
  });

  $('form input[type="text"]').keyup(function(event){
     alert("this gets called on key board input after the data is inserted in input field");
  });

注意： type="text" 只是一个示例，您可能还希望包括密码和电子邮件字段（如果使用 on change 事件，则还要包括选择框）。

- Joel Harkes

---

我说过我正在使用提交按钮，被改变的不是它的值，而是元素本身的属性。 - maazza

这些值只能通过JavaScript / jQuery或例如Chrome中的元素检查器进行更改。您无法捕获这些更改。如果您创建一个事件侦听器并在每次更改后调用它，或者在提交时检查差异，您可以捕获自己的更改。 - Joel Harkes

没有太多理由需要这样做，如果用户通过检查器编辑元素，他也可以更改检查元素的代码... 因此，您应始终在后端验证数据。 - Joel Harkes

出于安全考虑（显然），我不想这样做，但是我希望它可以帮助我调试一个脏项目中的一些JS代码。 - maazza

@Vinícius Moraes，你能提供一些文档吗？ - maazza