当您想要搜索具有特定值的多个 HtmlObject 时，哪种 JavaScript 代码更有效？

Question

我尝试找出哪种 JavaScript 代码更高效，例如当我搜索多个 JavaScript Span 时。

这种模式与jquery：

$('span[value='+value+']')

或者使用标准 javascript 的这种模式：

function gEBI(id) {
    return document.getElementById(id);
}
var spans = gEBI("content").getElementsByTagName('span'); 
for (i = 0; i < this.spans.length; i++)
 { 
     if (this.spans[i].getAttribute("value") == valueThis ) { // operations } 
 }

还有一个问题，搜索通常是更高效的 jquery 或标准 JavaScript

Answer 1

在现代浏览器（IE8 及更高版本）中，jQuery 将比手动搜索 DOM 快得多。

现代浏览器支持querySelector和querySelectorAll，它允许使用 CSS 查询来查找节点，并且比旧的 DOM 方法快得多。jQuery 使用这些可用的功能，因此它可以从速度提升中受益。

但是，如果您确实追求速度，不需要古老的浏览器支持，并且仅使用基本的 CSS2.1 级别查询（例如您那里的查询），请直接使用 querySelector。这将比 jQuery 更快：

// If you only need just one
var span = document.querySelector('span[value='+value+']');
// If there's more than one span like that
var spans = document.querySelectorAll('span[value='+value+']');

http://caniuse.com/#search=querySelector