Is there a way to track all change to an HTML element?

Question

Is there a (good) way to track all changes to an HTML element ?

I tried to use javascript with jQuery but it does not work.

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

Somehow a style attribute is set on a submit button but I can't find where and how it is done.

EDIT: my question was not jQuery specific

i want to intercept the change (triggered by js) not to see if it is changed @adeneo , what happens when you do $SubmitInput.addClass('this'); ? — maazza, May 14 '13 at 09:44
Possible duplicate of [Detect element content changes with jQuery](https://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery) — Jason Aller, Aug 28 '19 at 04:11

score 6 · Accepted Answer · edited May 31 '13 at 18:34

You can track changes done to a DOM element by using mutationobservers:

// 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/

This will give you a MutationRecord object with details on what changed. More info about mutations at: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Don't forget to unregister your observers once you got what you needed. I know its a tricky thing. — Mircea, Jun 01 '13 at 00:06
Is there a way to shim MutationObserver for IE9? It seems not to be out in IE yet. — Doug, Nov 06 '13 at 03:08

Joel Harkes · Answer 2 · 2013-05-14T09:50:03.330

0

you can either track changes on an input field or check on submit:

  $('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");
  });

further more you could check on keyboard input on a specific input fields:

  $('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");
  });

Note : type="text" is only an example you probably also want your password and email fields to be included. (and select boxes if you use on change event)

edited May 14 '13 at 09:50

answered May 14 '13 at 09:44

Joel Harkes

10,975
3
46
65

I stated i am using a submit button and it is not the value that gets changed but the attributes of the element itself – maazza May 14 '13 at 09:46
these values can only be changed by javascript/jquery or element inspector in eg chrome. you can not catch these changes.. you could catch your own changes if you make an event listener which you call after every change. or you check differences on submit. – Joel Harkes May 14 '13 at 09:51
there is not much reason why you should, if the person edits the element via the inspecter he could also change the code which inspects the element.. so you should always validate your data in the back-end – Joel Harkes May 14 '13 at 10:36
I do not want to do it for security reasons(obviously) but to help me debug some js code from a dirty project – maazza May 14 '13 at 13:25
@Vinícius Moraes, can you provide some documentation ? – maazza May 15 '13 at 10:07

Is there a way to track all change to an HTML element?

2 Answers2