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