Suggestions on how build an HTML Diff tool?

Question

In this post I asked if there were any tools that compare the structure (not actual content) of 2 HTML pages. I ask because I receive HTML templates from our designers, and freq

Answer 1

If i was to tacke this issue I would do this:

1. Plan for some kind of a DOM for html pages. starts at lightweight and then add more as needed. I would use composite pattern for the data structure. i.e. every element has children collection of the base class type.
2. Create a parser to parse html pages.
3. Using the parser load html element to the DOM.
4. After the pages' been loaded up to the DOM, you have the hierachical snapshot of your html pages structure.
5. Keep iterating through every element on both sides till the end of the DOM. You'll find the diff in the structure, when you hit a mismatched of element type.

In your example you would have only a div element object loaded on one side, on the other side you would have a div element object loaded with 1 child element of type paragraph element. fire up your iterator, first you'll match up the div element, second iterator you'll match up paragraph with nothing. You've got your structural difference.