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

问题

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.

回答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.

回答2:

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;
}

回答3:

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

回答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.

回答5:

I have solve the problem, daisydiff is a solution

来源：https://stackoverflow.com/questions/3760991/are-there-any-tools-that-can-compare-html-documents-by-dom-structure

标签

javascript

xhtml