Is there a simple way to know when the DOM has been changed ?
Is there any built-in JavaScript/jQuery event/function for this ?
+2
A:
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);
Delan Azabani
2010-09-19 06:19:29
A:
There is no built-in event for this that's widely supported unfortunately. You can use a jQuery plugin called livequery though.
box9
2010-09-19 06:20:18
See my answer; there actually are DOM change notification events.
Delan Azabani
2010-09-19 06:20:55
They're great but aren't properly supported. I'd rather save myself the trouble and use a tested plugin.
box9
2010-09-19 06:38:08
Using libraries inhibits the demand for standards development as well as stemming the flow of users away from e.g. Internet Explorer.
Delan Azabani
2010-09-19 06:51:31
@Delan These are very erroneous assumption - Javascript libraries abstracts away differences in browser's implementation of the DOM and help create a baseline with which it is possible to develop on, instead of spending time ironing out cross browser compatibility problems. Breaking your site on IE won't stop people moving away from IE, just people from visiting your site, and isn't going to help anyone.
Yi Jiang
2010-09-19 07:04:33
Again, it really depends on the context and target audience. If you're creating a boring company website with a fader and maybe a tab, plus you need to support IE, by all means, go ahead. However, if you're writing a modern web app targeted at smart, modern people, I'd write it all in vanilla standards JavaScript with no browser hacks or libraries.
Delan Azabani
2010-09-19 07:07:53
@Delan: I see what you did there. Fact is, though, ignoring IE and hoping it'll go away does nothing but alienate the 80% of the world that still uses IE. If a site looks and works like crap in someone's browser, their first thought won't be "IE is broken" -- it'll be "this site is broken". No matter what the FF weenies say, *IE still matters*, and the site should at least work in it. If you wanna say otherwise, frankly, you probably haven't had to design a real web site for a real client -- cause in almost all cases, the people paying for the site will be viewing it in IE.
cHao
2010-09-19 07:39:10
I have developed sites for clients other than myself, and have had to take IE into consideration. That meant the use of some IE hacks, but I still generally avoid libraries because they're usually overkill. For example, this fader slideshow script has only a few lines of IE hacks, so a library is unnecessary: http://zanaenterprise.com.au/scripts/slideshow.js
Delan Azabani
2010-09-19 07:53:49
One slide show, sure. One slide show, though, does not a "modern web app" make. Think Hotmail, or Google Docs, or [Sketchpad](http://mugtug.com/sketchpad/). You can either code all the stuff required for something like that from scratch, or you can use the fruits of someone else's hard work (ie: a library) and be half done before you even start. This without even covering the browser abstraction mentioned by Yi above.
cHao
2010-09-19 08:44:12
+4
A:
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?
korchev
2010-09-19 06:24:18
I want to let user to change the color of any element on the page by clicking on the element. When the clicking point is known, I want to scan the DOM for all elements that resides at the clicking point, and let user to decide which element he want to change the color. Since elements can be added and removed on this page, it looks like I must scan the DOM on every click. I thought cache all DOM elements in a variable and change this variable when the DOM changes.
Misha Moroshko
2010-09-19 14:23:25