javascript - 如何使 document.querySelector 在 IE6 中工作

Question

我在一个网站上工作，我得到了一个在 Internet Explorer 6 中不工作的 javascript 函数。我知道

document.querySelector(selector)

只工作in Internet Explorer 8+

我该怎么做才能使其在 IE6 中正常运行？

(我不会为了好玩而尝试让它工作；))

Answer 1

我强烈建议您不要再尝试支持 IE6。

---

但是您可以使用 this very clever trick from an Ajaxian article 添加 document.querySelector 和 document.querySelectorAll .这篇文章实际上有点错误，它添加了一个叫做 querySelector 的东西来代替 querySelectorAll。我在这里固定了名称:

/*@cc_on
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;
    }
@*/

尽管我永远不会支持那样使用for-in； details and alternatives in this other answer .

据此，querySelector:

/*@cc_on
if (!document.querySelector)
    document.querySelector = 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);

        // Return first result only               
        return document.__qsResult[0] || null;
    }
@*/

---

请注意，以上均未添加 Element#querySelector 或 Element#querySelectorAll(仅在元素内查看的版本)，只是 document.querySelector 和 document.querySelectorAll。你不能在 IE6 上添加 Element 版本而不将它们添加到每个单独的元素，因为 IE6 不支持元素原型(prototype)。