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

Question

使用本文中的代码,我已成功添加querySelectorAll到documentIE7中.

但我需要在元素上使用它,而不是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,或者其他任何一个.或者只使用Sizzle(jQuery在v1.9分支中使用的选择器引擎).

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

你不能在IE7上扩展元素原型(遗憾的是),所以除非你想通过预处理器函数运行所有的元素实例来添加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;
})();

当然,如果你想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
    // ...
}

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