Are there any tools that can compare HTML documents by DOM structure?

Question

I want compare two HTML documents, and want to know if they are the same. But only compare by DOM structure, which means ignoring the order of the attributes in a tag, for example, <table id="one" name="table">, <table name="table" id="one"> are the same.

possible duplicate of [Are there any tools out there to compare the structure of 2 web pages?](http://stackoverflow.com/questions/48669/are-there-any-tools-out-there-to-compare-the-structure-of-2-web-pages) — Daniel Vandersluis, Sep 21 '10 at 14:04
@DanielVandersluis Disagree with duplicate. The other question also wants to ignore actual id and text values. — Ciro Santilli OurBigBook.com, Feb 27 '14 at 05:19

score 4 · Answer 1 · answered Sep 21 '10 at 15:09

DOM Level 3 Core provides the method isEqualNode() which compares content give a parsed DOM Node.

This is supported by Firefox, Chrome, Safari and IE9, but not Opera or earlier browsers. If you need support in other browsers you would have to implement it yourself. Here's a partial implementation in JS:

function Node_isEqualNode(that, other) {
    // Use native support where available
    //
    if ('isEqualNode' in that)
        return that.isEqualNode(other);

    // Check general node properties match
    //
    var props= ['nodeType', 'nodeName', 'localName', 'namespaceURI', 'prefix', 'nodeValue'];
    for (var i= props.length; i-->0;)
        if (that[props[i]]!==other[props[i]])
            return false;

    // Check element attributes match
    //
    if (that.nodeType===1) {
        if (that.attributes.length!==other.attributes.length)
            return false;
        for (var i= that.attributes.length; i-->0;)
            if (!Node_isEqualNode(that.attributes[i], other.getAttribute(that.attributes[i].name)))
                return false;
    }

    // Check children match, recursively
    //
    if (that.childNodes.length!==other.childNodes.length)
        return false;
    for (var i= that.childNodes.length; i-->0;)
        if (!Node_isEqualNode(that.childNodes[i], other.childNodes[i]))
            return false;
    return true;
}

Note this doesn't do testing for the extra DocumentType properties as DOM Level 3 Core requires. You could add this fairly easily, but then browser support of stuff like entities is pretty weak anyway.

score 3 · Answer 2 · answered May 03 '11 at 09:20

I had this issue and was able to solve it by using jQuery's .html() function to put my html code into a div and then take it back out again, thus getting a canonical representation of the code. Seems to work just fine in Firefox 4 and IE8 at least.

function compareHtml(a, b) {
    var div = $(document.createElement('div'));
    div.html(a);
    var aNormalized = div.html()
    div.html(b);
    var bNormalized = div.html()
    return aNormalized == bNormalized;
}

score 1 · Answer 3 · answered Sep 21 '10 at 14:06

1

if you need to compare static content you can give diffxml or xmldiff a try (the later also has support for html files.

answered Sep 21 '10 at 14:06

Nikolaus Gradwohl

19,708
3
45
61

score 0 · Answer 4 · edited Mar 05 '13 at 06:11

0

I have solve the problem, daisydiff is a solution

edited Mar 05 '13 at 06:11

Brian Webster

30,033
48
152
225

answered Sep 23 '10 at 13:39

jason

1,621
6
21
39

DaisyDiff is giving some null pointer. Please share your solution. – roger_that Sep 26 '13 at 04:54

score 0 · Answer 5 · answered Sep 23 '10 at 15:16

0

I've used WinMerge for a hella long time and i've never had any problems with it.

I use it for php/html/css, etc - but colleagues of mine also use it for delphi, c# and more.

answered Sep 23 '10 at 15:16

Stann0rz

667
2
7
16

Are there any tools that can compare HTML documents by DOM structure?

5 Answers5

Linked