How to identify when the DOM has been changed?

Question

Is there a simple way to know when the DOM has been changed ?

Is there any built-in JavaScript/jQuery event/function for this ?

Answer 1

If you must detect changes you can check the DOM mutation events. The DOM events wikipedia page lists them all. However you should know that they are not supported in Internet Explorer and may fire too often in the browsers that support them. A brute force approach is to use setTimeout and check for changes by yourself.

My experience shows though that the need for DOM change notifications can be avoided. Could you give more details about your exact requirements?

Answer 2

You can attach to many DOM events depending on the type of change you wish to listen for. Here's a page with all the DOM change events:

https://developer.mozilla.org/en/DOM_Events

The generic, catch-all DOM change event is DOMSubtreeModified. For example:

document.getElementById('abc').addEventListener('DOMSubtreeModified', f, false);