javascript - 如何将 querySelectorAll() 函数添加到 IE <= 7 的元素？

Question

使用 this article 中的代码我已经在 IE7 中成功地将 querySelectorAll 添加到 document。

但我需要在 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
    // ...
}

有没有办法将 querySelectorAll 添加到 IE7 中的元素，而不仅仅是添加到 document？

Answer 1

非常有趣的问题。

我倾向于为此使用库，例如​​ jQuery ，下面提到的之一，Closure , 或 any of several others .或者只使用 Sizzle (jQuery 在 v1.9 分支中使用的选择器引擎)。

但是回答你实际问的问题:

你不能在 IE7 上扩展元素原型(prototype)(很遗憾)，所以除非你想通过预处理器函数运行所有元素实例以向它们添加 querySelectorAll(方式 Prototype 和MooTools 工作，例如)，你必须有一个单独的函数来传递元素。

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

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

当然，如果您想在具有querySelectorAll 的浏览器中使用qsaWorker，您需要这样:

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
    // ...
}

但同样，我倾向于使用库...