如何将 querySelectorAll() 函数添加到 IE <= 7 的 Element 中？

代码来自本文 http://www.codecouch.com/2012/05/adding-document-queryselectorall-support-to-ie-7/我已经添加成功了querySelectorAll to document in IE7.

但我需要在element而不是document， 像这样：

var containers = document.querySelectorAll('.container');   // Works
for (var i=0; i<=containers.length; i++) {
    var container = containers[i];
    container.querySelectorAll('a[data-type="people"]');    // Fails
    // ...
}

有没有办法添加querySelectorAllIE7 中的元素而不仅仅是document?

非常有趣的问题。

我倾向于使用图书馆来做到这一点，比如jQuery http://jquery.com，下面提到的其中之一，Closure http://code.google.com/closure/library, or 其他几个中的任何一个 http://en.wikipedia.org/wiki/List_of_JavaScript_libraries。或者只是使用Sizzle https://github.com/jquery/sizzle/（jQuery 在 v1.9 分支中使用的选择器引擎）。

但回答你实际问的问题：

你不能在 IE7 上扩展元素原型（遗憾的是），所以除非你想通过预处理器函数运行所有元素实例来添加querySelectorAll对他们来说（方式原型 http://prototypejs.org and MooTools http://mootools.net/例如，工作），您必须有一个单独的函数来将元素传递到其中。

这是编写该函数的一种方法：

var qsaWorker = (function() {
    var idAllocator = 10000;

    function qsaWorker(element, selector) {
        var needsID = element.id === "";
        if (needsID) {
            ++idAllocator;
            element.id = "__qsa" + idAllocator;
        }
        try {
            return document.querySelectorAll("#" + element.id + " " + selector);
        }
        finally {
            if (needsID) {
                element.id = "";
            }
        }
    }

    return qsaWorker;
})();

当然，如果你想使用qsaWorker在具有以下功能的浏览器中querySelectorAll，你想要这个：

function qsaWorker(element, selector) {
    return element.querySelectorAll(selector);
}

那么总的来说，您可能想要：

var qsaWorker = (function() {
    var idAllocator = 10000;

    function qsaWorkerShim(element, selector) {
        var needsID = element.id === "";
        if (needsID) {
            ++idAllocator;
            element.id = "__qsa" + idAllocator;
        }
        try {
            return document.querySelectorAll("#" + element.id + " " + selector);
        }
        finally {
            if (needsID) {
                element.id = "";
            }
        }
    }

    function qsaWorkerWrap(element, selector) {
        return element.querySelectorAll(selector);
    }

    // Return the one this browser wants to use
    return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim;
})();

使用它的代码将如下所示：

var containers = document.querySelectorAll('.container');
for (var i=0; i<=containers.length; i++) {
    var container = containers[i];
    var links = qsaWorker(container, 'a[data-type="people"]'); // <== Changed
    // ...
}

但同样，我倾向于使用图书馆......