有没有办法跟踪HTML元素的所有更改？

Question

是否有(良好)方法来跟踪HTML元素的所有更改？

我尝试使用javascript与jQuery但它不起作用.

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

不知何故,在提交按钮上设置了一个样式属性,但我无法找到它的位置和方式.

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/