DOM and CSS Comparison with jQuery

[scarcella]

I have written a script to get all elements then i go and find this element in another iframe. Wait, so essentially i have 2 frame's on a page, the one on the left i called the "online" and the 2nd one i called the "base". My end result is to compare the css with (getComputedStyle) with the element from 'online' compared to 'base'. I have the selecter built, from the body down, so like "body div.header div#logo img.home-log" but my problem is when it comes to li's or a links. So like "body ul.test li" but the DOM could have like 6 li's in that ul. So my question is how do i reference these uniquely. I was thinking, find this li, where the children are x, and then compare its parent (the li). so the li might look like, li a.atest so find the li a.atest and compare its parent, the li.

How would i go about this:

<script type="text/javascript">
    function appendOverlay(a, sel) {
        var style_span = "color:#000; padding:10px; background: #fff;";
        var style = "position:absolute; left:" + a.offset().left + "px; top:" + a.offset().top + "px; width:" + a.width() + "px; height:" + a.height() + "px; background:" + getRandColour() + "; z-index:1000;";
        var b = "<div style='" + style + "'><span style='" + style_span + "'>" + sel + "</span></div>";
        return b;
    }

    function addOverlays(overlays, to) {
        var content = "<div id='VULY-CHECKER'>";
        for (i = 0; i < overlays.length; i++) {
            content = content + overlays[i];
        }
        content = content + "</div>";
        $('body', top.frames[to].document).append(content);
    }

    function getRandColour() {
        function c() {
            return Math.floor(Math.random() * 255);
        }
        return "rgba(" + c() + ", " + c() + ", " + c() + ", 0.4)";
    }

    function getSel(a) {
        var sel = a.prop('localName');
        if (typeof a.attr('id') != "undefined") {
            var idA = a.attr('id').trim();
            if (idA != "") {
                sel = sel + "#" + idA; // id
            }
        }
        if (typeof a.attr('class') != "undefined") {
            var classA = a.attr('class').trim();
            if (classA != "") {
                sel = sel + "." + classA.replace(/\s/g, ".");
            }

        }
        return sel;
    }

    var selectorArr = [];
    function getSelNew(elm) {
        if (elm.localName != "body") {
            var a = $(elm, top.frames["base"].document);
            selectorArr.push(getSel(a));
            return getSelNew(elm.parentElement);
        } else {
            selectorArr = selectorArr.reverse();
            var selectorString = selectorArr.join(' ');
            selectorArr = [];
            return selectorString;
            //console.log($(selectorString, top.frames["base"].document)[0]);

        }
    }

    var base_DOM, online_DOM;
    $(window).load(function() {
        online_DOM = window.frames["online"].document.querySelectorAll("body *");
        base_DOM = window.frames["base"].document.querySelectorAll("body *");

        var overlays = [];
        var dupDetect = [];

        for (var i = 0; i < base_DOM.length; i++) {

            var a = $(base_DOM[i], top.frames["base"].document);

            if (a.prop('localName') !== "script") {

                var selA = getSelNew(base_DOM[i]);

                for (j = 0; j < online_DOM.length; j++) {

                    var b = $(online_DOM[j], top.frames["online"].document);

                    if (b.prop('localName') !== "script") {

                        var selB = getSelNew(online_DOM[j]);

                        if (selA == selB) {
                            var selectorA = $(selA, top.frames["online"].document);
                            var selectorB = $(selB, top.frames["base"].document);

                            if (selectorB.length > 1) {

                            } else {
                                var styleA = window.getComputedStyle(a[0], null);
                                var styleB = window.getComputedStyle(b[0], null);
                                if (JSON.stringify(styleA) !== JSON.stringify(styleB)) {
                                    overlays.push(appendOverlay(a, selA));
                                }
                            }


                        }
                    }
                }

            }
        }

        addOverlays(overlays, "base");

    });
</script>

So my question is how do i reference these uniquely. I was thinking, find this li, where the children are x, and then compare its parent (the li). so the li might look like, li a.atest so find the li a.atest and compare its parent, the li.

Is this for a app?