Detecting dynamic page changes

[Jeff]

Hi all,

I'd like to be able to detect when page content is dynamically changed
by Javascript. I'd like to detect any changes to the content, such as
the addition of new DOM elements and when DOM elements that are hidden
are made visible (or vice versa). I will have no advance knowledge of
the scripts that will be run along with the script I will create.

I've implemented a solution that works reasonably well, but I'm not
sure if there are cases I'm not thinking of where it will fail, or if
there are more efficient means of doing the same thing.

My solution is to simply retrieve and periodically compare the content
of the innerHTML property of the main body tag elemnt.

So, summarized as follows:

function check() {
var bodyContent = document.getElementsByTagName('body')[0];
if(bodyContent != oldBodyContent) {
alert('body changed');
}
setTimeout(check, 500);
}

Is there a better way? What won't this catch?

Thanks,
Jeff

 

[Evertjan.]

Jeff wrote on 07 apr 2007 in comp.lang.javascript:

Hi all,

I'd like to be able to detect when page content is dynamically changed
by Javascript. I'd like to detect any changes to the content, such as
the addition of new DOM elements and when DOM elements that are hidden
are made visible (or vice versa). I will have no advance knowledge of
the scripts that will be run along with the script I will create.

I've implemented a solution that works reasonably well, but I'm not
sure if there are cases I'm not thinking of where it will fail, or if
there are more efficient means of doing the same thing.

My solution is to simply retrieve and periodically compare the content
of the innerHTML property of the main body tag elemnt.

So, summarized as follows:

function check() {
var bodyContent = document.getElementsByTagName('body')[0];

This is only a pointer to the body, the content is seen in innerHTML or a
DOM equivalent.

if(bodyContent != oldBodyContent) {

oldBodyContent is not specified.

alert('body changed');
}
setTimeout(check, 500);
}

Is there a better way? What won't this catch?

everything, meseems, and certainly CSS changes like color or
display:none;

==============================

However, since you are the boss of the scripting, why not alert the
change by the changing code itself?

<span onclick = "this.color = 'blue';alert('color changed');" ....