IE7 Queryselector找不到元素 [英] IE7 Queryselector not finding elements

问题描述

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)有一个奇怪的问题.

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

最奇怪的是，我的功能在文档模式5和8下可以正常工作.

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

找不到某些元素.当我检查浏览器开发人员工具时，它们位于HTML文档中.

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

我看不到为什么这些在此特定版本的IE中不正确，而其他所有功能都能正常工作.

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.

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

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

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

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

除了IE7之外，其他任何地方都可以使用.

It works everywhere else except IE7.

将代码更改为摘要.

我已经通过逐步查明了问题所在.

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");

哪些作品和

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

没有.

FinalEdit(我放弃):结果似乎根据查询选择器的顺序而有所不同.

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

推荐答案

经过一番挖掘，我在Github上找到了一个解决方案.

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;
    };
}());

这在所有较早的IE版本中均有效.我只是替换了以前使用的polyfill.

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

这篇关于IE7 Queryselector找不到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！