javascript compare two DOM trees

views:

166

answers:

+1 Q:

javascript compare two DOM trees

I want to compare the change of a DOM node after a user event is fired on it; but I don't know on which element a user would fire, so my idea is to (1) save the DOM tree before an event and (2) compare the saved tree with the updated DOM tree when an event is fired.

My question are (1) is there any better way? and (2) if there is no other way, what would be the fast algorithm to compare two DOM trees?

+1 A:

Depends on how complex a change you're expecting, but one possible "better" way would be to make use of the built in DOM events. Specifically, the DOMSubtreeModified event will fire whenever the part of the DOM tree you're watching gets changed.

Alconja 2010-05-25 06:16:35

The problem is that I don't know which part of DOM would change...

Paul 2010-05-25 06:18:18

The attach a `DOMSubtreeModified` listener to the document.

Tim Down 2010-05-25 08:18:25

The built-in DOM events don't work in IE, so this may not be a viable solution anyway.

Tim Down 2010-05-25 08:18:59

Should more than one answer be selected as accepted answer, I would have added this answer as an accepted answer too...

Paul 2010-05-25 16:45:45

+1 A:

Since events bubble up, you could simply attach an event listener to the window object which catches all events, regardless of where they originated. You can examine the passed event object for event.target to see where it originated.

deceze 2010-05-25 06:17:43

guys, what would you recommend to check the change of a DOM tree, such as a node deleted or added.

Paul 2010-05-25 06:25:29

@Paul You aren't in control of the functions that will be executed on the DOM elements? Otherwise you should know. ;)

deceze 2010-05-25 06:38:56

@deceze, no, I'm not because the change of DOM might happen in runtime...

Paul 2010-05-25 16:39:32

ansaurus

tags:

views:

answers:

javascript compare two DOM trees

related questions