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.

Answer 1

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

Answer 2

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.

Answer 3

I have solve the problem, daisydiff is a solution, and thanks for Daniel Vandersluis

Answer 4

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.