Javascript 重构DOM搜索方法？

作为Chrome扩展的一部分，我在整个DOM中搜索每个ID/类中包含特定单词的元素

目前它看起来像：

"allSelectors": document.querySelectorAll("[id*='example'][class*='example']"),
"collapse": function () {
                for (var i = 0; i < MyObject.allSelectors.length; i++) {
                    // Manipulate MyObject.allSelectors[i] etc
                }
}, 

不容易扩展或很好

其次，我认为

document.querySelectorAll

非常慢-我使用它的原因是因为我需要搜索id/类中的任何位置（因此使用

*=

），并且不能使用大型外部库（如jQuery），因为这是一个小文件，正在注入用户端

---

这两个问题都有解决办法吗？因为如果有很多匹配项，那么这种缓慢可能会成为一个问题

首先，我完全支持

querySelectorAll

，我认为它没有那么慢，而且它完全适合像你这样的情况。我同意你的观点，增加一个库对于这一点来说是过分的，而且它可能没有别人认为的那么有益（让我们一起来看看）

然后，我再次同意您的观点，即当前的解决方案不是非常可扩展，阵列是一种可行的方法。下面是一个使用数组的非常基本的实现：

// an array of classes and ids to match
var nodes,
    searches = [
  '[id*="test"]',
  '[class*="example"]'
];

// a simple function to return an array of nodes 
// that match the content of the array
function getNodes(arr){
  return Array.prototype.slice.call(document.querySelectorAll( arr.join() ));
}

nodes = getNodes(searches); 

好的方面是，可以轻松地在阵列中添加或删除新类和ID，例如，稍后您可以添加：

searches.push('[id*="some"]');

nodes = getNodes(searches); // new nodes will be fetched

---

这是一个完整的示例代码。

为什么不能使用外部库？@Xan内容脚本被注入，我希望事情尽可能快和小（但最好也不要太难看）。嗯，这是一个问题吗？（我怀疑可能有误会）@Xan，因为如果我的内容脚本只有6kb，jquery compressed就有83kb，将两者都注入似乎有点过分了。。如果一个用户有很多扩展，那么大小可能很重要，也许还有其他原因，所以我用纯JS制作了所有东西“第二，我认为

document.querySelectorAll

非常慢”——相反，我认为

querySelectorAll

可能是最快的。毕竟，这使用了浏览器直接实现的选择器引擎；在JavaScript中实现的任何其他内容都很可能较慢。（甚至像jQuery这样的库在浏览器中可以执行这样的任务时也会使用

querySelectorAll

）如果感觉很慢，那是因为您希望它做的事情非常昂贵——毕竟，每一个元素都必须仔细检查。看起来很棒，谢谢！快速问题：为什么我必须在

数组.prototype

部件周围包装

函数（）

，才能让它工作？如果我尝试使用数组：Array.prototype.slice.call（document.querySelectorAll（MyObject.selectorArray.join（））它有一个运行时错误

searches.push('[id*="some"]');

nodes = getNodes(searches); // new nodes will be fetched