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

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.