如何为IE< = 7添加querySelectorAll（）函数给Element？ [英] How to add querySelectorAll() function to Element for IE <= 7?

问题描述

使用此文章中的代码我已成功将 querySelectorAll 添加到IE7中的文档。

With the code from this article I've successfully added querySelectorAll to document in IE7.

但我需要在元素而不是文档上使用它，如下所示：

But I need to use it on an element rather than document, like this:

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中的元素而不是仅添加到文档？

Is there a way to add querySelectorAll to elements in IE7 rather than only to document?

推荐答案

非常有趣的问题。

我会倾向于使用一个库，比如 jQuery ，下面提到的一个，关闭，或者其中任何一个。或者只使用 Sizzle （jQuery在v1.9分支中使用的选择器引擎）。

I would lean toward using a library for this, like jQuery, one of the ones mentioned below, Closure, or any of several others. Or just using Sizzle (the selector engine jQuery uses in the v1.9 branch).

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

But answering the question you actually asked:

你不能在IE7上扩展元素原型（遗憾的是），所以除非你想要运行所有的您的元素实例通过预处理器函数向其添加 querySelectorAll （ Prototype 和 MooTools 工作，你必须有一个单独的功能，你传递元素。

You can't extend element prototypes on IE7 (sadly), so unless you want to run all of your element instances through a preprocessor function to add querySelectorAll to them (the way Prototype and MooTools work, for instance), you'll have to have a separate function you pass the element into.

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

Here's one approach to writing that function:

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 的浏览器中，您需要这样：

And of course, if you want to use qsaWorker in browsers that have querySelectorAll, you'd want this:

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

总的来说，你可能想要：

So in total, then, you'd probably want:

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

使用它的代码如下所示：

Your code using it would then look like this:

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

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

But again, I would tend to lean toward using a library...

这篇关于如何为IE< = 7添加querySelectorAll（）函数给Element？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！