How do you test for equivalence between two HTML elements or jQuery selectors?

Question

Can you write a function that sees if two pieces of DOM are equivalent? It should ignore irrelevant whitespace. Ideally, it should also ignore empty attributes.

So the following should be equal:

<div style="">
<div>a</div>
</div>

and

<div><div>a</div></div>

Answer 1

I've created a function that will compare the lengths of the jQuery objects and compare the tag names of each child element. So far it seems to work fairly well in the basic fiddle I've created for it. Here is the code, let me know how it works for you and if there are any bugs/improvements needed to be made. This does not compare the inner text though, however if you need that I think it should be easy enough to tweak.

UPDATE 1:

Changed to use recursion instead of a for loop, and it now compares the inner text of each element as well. If you don't need the text checked just delete that comparison.

UPDATE 2:

Per the OP comment, I've found and edited a few extra functions that can be utilized to compare CSS of the elements and check that they are the same. If not then the element are not the same and will return false.

jQuery:

This first function is a jQuery function that will return an object of the CSS properties.

(function ($) {
    $.fn.getStyleObject = function () {
        var dom = this.get(0);
        var style;
        var returns = {};
        if (window.getComputedStyle) {
            var camelize = function (a, b) {
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for (var i = 0; i < style.length; i++) {
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if (dom.currentStyle) {
            style = dom.currentStyle;
            for (var prop in style) {
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

Next function defined is used to compare the objects returned by the previous function.

function arrays_equal(a, b) {
    var result = true;
    $.each(a, function (key, value) {
        if (!b.hasOwnProperty(key) || b[key] !== a[key]) {
            result = false;
        }
    });

    return result;
}

This is the primary function that checks for equality between the two elements. It will make a call to the added jQuery function to retrieve an object made of the CSS properties and then compares the two objects the second function that was added.

 function equalElements(a, b) {
    if (a.length != b.length) {
        return false;
    }

    if (a.children().length != b.children().length) {
        return false;
    } else {
        if (a.children().length > 0) {
            var x = a.children().first();
            var y = b.children().first();
            equalElements(x, y);
        }

        if (a.get(0).tagName != b.get(0).tagName) {
            return false;
        }

        if (a.text() != b.text()) {
            return false;
        }

        var c = a.getStyleObject();
        var d = b.getStyleObject();

        if (!arrays_equal(c, d)) {
            return false;
        }
    }

    return true
}

HTML: (Used to compare and test function)

<div id="div1">
    <div>a</div>
</div>
<div id="div2" style="">
    <div>a</div>
</div>
<div id="div3" style=""></div>
<div id="div4" style="">
    <div>a</div>
    <div>a</div>
</div>
<div id="div5" style="">
    <div>b</div>
</div>
<div id="div6" style="width: 50px;">
    <div>a</div>
</div>
<div id="div7" style="width: 50px;">
    <div>a</div>
</div>
<div id="div8" style="width: 25px;">
    <div>a</div>
</div>
<div id="div9" style="width: 50px; height: 10px;">
    <div>a</div>
</div>
<ul id="list1">
    <li>a</li>
</ul>

Test Code: (Sample see fiddle for full test)

var a = $("#div1");
var b = $("#div2");
var same = equalElements(a, b);

if (same) {
    alert("div1 is equal to div2");
}