IE7 Queryselector 找不到元素

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>

我的 IE 有一个奇怪的问题，文档模式 7。

最奇怪的是我的函数在文档模式 5 和 8 下都能正常工作。

未找到某些元素。当我检查浏览器开发人员工具时，它们在 HTML 文档中。

我不明白为什么这些在这个特定版本的 IE 中是不正确的，而所有其他的都可以正常工作。

希望有人有想法。提前致谢。

编辑：

这是 IE 早期版本的单独脚本。我在其他脚本中使用 getElementsByClassName。

脚本标签位于 HTML 页面的底部。

它适用于除 IE7 之外的其他任何地方。

编辑：将代码更改为 sn-p。

编辑：我已经通过逐步解决问题。

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

这条线似乎适用于某些元素而不适用于其他元素，因此它们不会被推送。据我所知，没有区别

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

哪个有效并且

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

没有。

FinalEdit（我放弃）：结果似乎因查询选择器的顺序而异。

Answer 1

经过一番挖掘，我在 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;
    };
}());

这适用于所有早期的 IE 版本。我刚刚更换了之前使用的 polyfill。

Answer 2

不支持，https://caniuse.com/#feat=queryselector

您可以使用 findElementById 或 findElementByClassName 等替代方法