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

Posted 2023-05-09

【中文标题】如何将 querySelectorAll() 函数添加到 IE <= 7 的 Element？

【英文标题】：How to add querySelectorAll() function to Element for IE <= 7?

【发布时间】：2013-05-04 21:46:33

【问题描述】：

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

但我需要在元素而不是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？

【问题讨论】：

为什么不试试Sizzle library。它与 jQuery 使用的选择器引擎相同。

我需要保持代码很小，不需要不必要的功能。 ;-)

【参考方案1】：

非常有趣的问题。

我倾向于为此使用库，例如​​ jQuery，下面提到的库之一，Closure 或 any of several others。或者只是使用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;
)();

当然，如果你想在有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
    // ...

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