DOM comparison utility

[sueyic]

Hi all,

Do you know of any tool which can compare the DOM structure of the
content of the web browser?

Specifically, it would be great if there was tool or tools which could:
- Capture the DOM of a website and save it
- Capture the DOM of the website later and save it
- Compare the two DOM structures so you could easily see what's
different about them

Are there such tools? .. I have not found them yet while googling ..
thanks for your help!

- sue yi

 

[petermichaux]

Hi all,

Do you know of any tool which can compare the DOM structure of the
content of the web browser?

I haven't read much about this but page 805 of O'Reilly's JavaScript:
The Definitive Guide 4th ed caught my eye. There is a DOM Level 2
Event's library called MutationEvent. The subheading is "details about
a document change". I don't know if it is well supported in browsers or
if it can do what you want.

Peter

 

[Lasse Reichstein Nielsen]

Do you know of any tool which can compare the DOM structure of the
content of the web browser?

Why not compare HTML directly? The DOM structure will match the HTML,
except that some whitespaces might be lost.

/L

 

[sueyic]

The website uses multiple frames ... so viewing the HTML from the main
page shows only framesets and frames, and some of the pages within also
contain framesets.

 

[Richard Cornford]

Why not compare HTML directly? The DOM structure will match
the HTML, except that some whitespaces might be lost.

The DOM structure will only match the mark-up if the mark-up is
sufficiently structurally valid to be directly translated into a DOM
structure. If the receiving browser sees a need to apply
error-correction to the mark-up it receives it is entirely possible that
DOM structure will not reflect the mark-up, and not reflect it in
different ways in different browsers. The crux of the OPs problem may
actually be an attempt to program the scripted interactions with a DOM
resulting from structurally invalid mark-up, with its consequent need to
cope with seemingly random and arbitrary variation in DOM structures
resulting from browser error-correction.

Richard.

 

[Thomas 'PointedEars' Lahn]

Specifically, it would be great if there was tool or tools which could:
- Capture the DOM of a website and save it
- Capture the DOM of the website later and save it
- Compare the two DOM structures so you could easily see what's
different about them

Are there such tools? .. I have not found them yet while googling ..
thanks for your help!

My ObjectInspector[1] allows for the latter, manually, running in both
browsers which document trees should be compared. I have not thought of
saving the document tree as a file yet, but now that you mention it: yes,
certainly it would be interesting to run a kind of diff on the generated
files, so it is on my To Do list as of now.


PointedEars
___________
[1] <URL:http://pointedears.de/ObjectInspector>

 

[sueyic]

Hi PointedEars,

Your website looks like it could be very useful, but I have not
understood yet how to use it. How do you load a particular web-page to
be loaded into the ObjectInspector?

Btw, I like the UI -- the way you've made the website look just like a
client VB application

- sue yi

 

[Thomas 'PointedEars' Lahn]

Your website looks like it could be very useful, but I have not
understood yet how to use it. How do you load a particular web-page to
be loaded into the ObjectInspector?

My ObjectInspector (OI) being still alpha, there is an undocumented
feature, ObjectInspector.prototype.include() in objinsp.js (lines 189+),
which includes the OI as an IFrame/ILayer into an HTML document. It takes
two arguments: the URL of the ObjectInspector HTML resource (index.html),
and the options for this OI instance (default: "root=parent").

You can then access the parent window and document through the `parent'
property of `window' (or the Global Object, as specified by the default
options above), provided you access the ObjectInspector from the same
domain or the same second-level domain (for the latter, set
`document.domain' to work around the Same Origin Policy). That is, you
will have to download the index.html and the required script libraries
to your webspace, and link the latter in the former accordingly.

Release 2.0 will be available as a package containing all required files,
that you can download, extract, and use as is. Note that the next Nightly
will be using a CSS-based layout instead of tables, provided I have worked
around all IE's CSS shortcomings by then (I have a CSS-based version on my
local server already that looks fine in Geckos, Operas, and KHTML.)

Btw, I like the UI -- the way you've made the website look just like a
client VB application

Looks like I did something wrong then ;-) It is intended to look like the
current GUI as it uses system colors.[1] VB has nothing to do with that.


PointedEars
___________
[1] <URL:http://www.w3.org/TR/CSS2/ui.html#system-colors>