看看这个

https://codepen.io/bagdaulet/pen/bzdKjL

getElementById比querySelector快25%

Jquery是最慢的

var q = time_my_script(function() {

    for (i = 0; i < 1000000; i++) {
         var w = document.querySelector('#ll');
    }

});

console.log('querySelector: '+q+'ms');

从Mozilla文档收集:

NodeSelector接口 该规范为任何实现Document、DocumentFragment或Element接口的对象添加了两个新方法:

querySelector

返回节点子树中第一个匹配的Element节点。如果 没有找到匹配的节点，返回null。

querySelectorAll

对象中所有匹配的Element节点 节点的子树，如果没有找到匹配则返回空的NodeList。

and

注意:querySelectorAll()返回的NodeList不是活的 意味着DOM中的更改不会反映在集合中。 这与返回live的其他DOM查询方法不同 节点列表。

querySelector可以是一个完整的CSS(3)-Selector，包括id、类和伪类，如下所示:

'#id.class:pseudo'

// or

'tag #id .class .class.class'

使用getElementsByClassName，你可以定义一个类

'class'

使用getElementById，你可以只定义一个id

'id'

我想知道querySelector和querySelectorAll对getElementsByClassName和getElementById的区别到底是什么?

语法和浏览器支持。

当您想使用更复杂的选择器时，querySelector更有用。

例:所有从foo类成员元素派生的列表项:.foo li

document.querySelector("#view:_id1:inputText1")不起作用。但是写document.getElementById("view:_id1:inputText1")是有效的。知道为什么吗?

字符在选择器中有特殊的含义。你必须逃离它。(选择器转义字符在JS字符串中也有特殊的含义，所以你也必须转义它)。

document.querySelector("#view\\:_id1\\:inputText1")

关于差异，querySelectorAll和getElementsByClassName的结果中有一个重要的差异:返回值不同。querySelectorAll将返回一个静态集合，而getElementsByClassName将返回一个活动集合。如果你将结果存储在变量中供以后使用，这可能会导致混乱:

使用querySelectorAll生成的变量将包含在调用方法时实现选择器的元素。 使用getElementsByClassName生成的变量将包含在使用选择器时实现选择器的元素(这可能与调用方法时不同)。

例如，注意即使你没有重新赋值变量aux1和aux2，它们在更新类后包含不同的值:

// storing all the elements with class "blue" using the two methods var aux1 = document.querySelectorAll(".blue"); var aux2 = document.getElementsByClassName("blue"); // write the number of elements in each array (values match) console.log("Number of elements with querySelectorAll = " + aux1.length); console.log("Number of elements with getElementsByClassName = " + aux2.length); // change one element's class to "blue" document.getElementById("div1").className = "blue"; // write the number of elements in each array (values differ) console.log("Number of elements with querySelectorAll = " + aux1.length); console.log("Number of elements with getElementsByClassName = " + aux2.length); .red { color:red; } .green { color:green; } .blue { color:blue; } <div id="div0" class="blue">Blue</div> <div id="div1" class="red">Red</div> <div id="div2" class="green">Green</div>

querySelector和querySelectorAll是一个相对较新的api，而getElementById和getElementsByClassName已经和我们在一起很长时间了。这意味着您使用什么主要取决于您需要支持的浏览器。

至于:，它有一个特殊的含义，所以如果你必须将它用作ID/类名的一部分，你必须转义它。