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

经过一番挖掘，我在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之类的替代方式

IE7 Queryselector找不到元素

2 个答案: