IE7 Queryselector not finding elements

Question

 if (!document.querySelectorAll) document.querySelectorAll = function(selector) { var head = document.documentElement.firstChild; var styleTag = document.createElement("STYLE"); head.appendChild(styleTag); document.__qsResult = []; styleTag.styleSheet.cssText = selector+"{x:expression(document.__qsResult.push(this))}"; window.scrollBy(0, 0); head.removeChild(styleTag); var result = []; for (var i in document.__qsResult) result.push(document.__qsResult[i]); return result; } var tabs = document.querySelectorAll(".tab"); var descriptionTabs = document.querySelectorAll(".descriptionTab"); var hireTabs = document.querySelectorAll(".hireTab"); var salesTabs = document.querySelectorAll(".salesTab"); var lazyImages = document.querySelectorAll(".lazy"); console.log(tabs.length); console.log(hireTabs.length); console.log(salesTabs.length); console.log(descriptionTabs.length); console.log(lazyImages.length); 

 <img class="imageThumbs lazy" src=""> <img class="imageThumbs lazy" src=""> <img class="imageThumbs lazy" src=""> <img class="imageThumbs" src=""> <div class="tabContainer"> <div class="descriptionTab tab">Description</div> <div class="hireTab tab">HireTab</div> <div class="salesTab tab">SalesTab</div> </div> 

I have a weird problem with IE, document mode 7.

The weirdest thing about it is that my functions work fine in document modes 5 and 8.

Certain elements are not being found. When I check the browser developers tools they are in there, in the HTML doc.

I can't see why those ones are incorrect in this particular version of IE and all others work fine.

Hopefully someone has an idea. Thanks in advance.

EDIT:

This is a seperate script soley for earlier versions of IE. I am using getElementsByClassName in the other script.

The script tag is at the bottom of the HTML page.

It works everywhere else except IE7.

EDIT: Change code to be a snippet.

EDIT: I have pinpointed the issue by stepping through.

styleTag.styleSheet.cssText = selector+"{x:expression(document.__qsResult.push(this))}";

This line seems to work on some elements and not others, so they are not getting pushed. As far as I can see there is not difference between

var descriptionTabs = document.querySelectorAll(".descriptionTab");

Which works and

var hireTabs = document.querySelectorAll(".hireTab");

Which doesn't.

FinalEdit(I give up): The Results seems to differ depending on what order the queryselectors are in.

Answer 1

After some digging, I found a solution on Github.

https://gist.github.com/Fusselwurm/4673695

(function () {
    var
        style = document.createStyleSheet(),
        select = function (selector, maxCount) {
            var
                all = document.all,
                l = all.length,
                i,
                resultSet = [];

            style.addRule(selector, "foo:bar");
            for (i = 0; i < l; i += 1) {
                if (all[i].currentStyle.foo === "bar") {
                    resultSet.push(all[i]);
                    if (resultSet.length > maxCount) {
                        break;
                    }
                }
            }
            style.removeRule(0);
            return resultSet;

        };

    //  be rly sure not to destroy a thing!
    if (document.querySelectorAll || document.querySelector) {
        return;
    }

    document.querySelectorAll = function (selector) {
        return select(selector, Infinity);
    };
    document.querySelector = function (selector) {
        return select(selector, 1)[0] || null;
    };
}());

This works in all the earlier IE versions. I just replaced the polyfill I was using previously.

Answer 2

It's not supported, https://caniuse.com/#feat=queryselector

You can use alternatives like findElementById or findElementByClassName