IE7 查询选择器找不到元素

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 外，它在其他任何地方都有效。

编辑：将代码更改为片段。

编辑：我已经通过单步执行查明了问题。

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

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

之间没有区别

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

哪个有效

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

哪个没有。

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

Answer 1

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

您可以使用 findElementById 或 findElementByClassName

等替代方法

Answer 2

经过一番挖掘，我在 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。

IE7 查询选择器找不到元素

IE7 Queryselector not finding elements

javascript

internet-explorer-7