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

'#id.class:pseudo'

// or

'tag #id .class .class.class'

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

'class'

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

'id'

querySelector和getlementbyID(Claassname,Tagname等)之间的主要区别是，如果满足条件的元素超过一个，querySelector将只返回一个输出，而getElementBy*将返回所有元素。

让我们考虑一个例子，让它更清楚。

 <nav id="primary" class="menu">
                            <a class="link" href="#">For Business</a>
                            <a class="link" href="#">Become an Instructor</a>
                            <a class="link" href="#">Mobile Applications</a>
                            <a class="link" href="#">Support</a>
                            <a class="link" href="#">Help</a>
   </nav> 

下面的代码将解释其中的区别

**QUERY SELECTOR**
document.querySelector('.link'); // Output : For Business (element)

document.querySelectorAll('.link'); //Out All the element with class link

**GET ELEMENT**
document.getElementsByClassName('link') // Output : will return all the element with a class "link" but whereas in query selector it will return only one element which encounters first.

简而言之，如果我们想选择单个元素，就选择queryslector，如果我们想选择多个元素，就选择getElement

从Mozilla文档收集:

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

querySelector

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

querySelectorAll

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

and

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

关于差异，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 or getElementsByClassName

我发现了这个: https://jsperf.com/getelementsbyclassname-vs-queryselectorall/18

它在上面的2个x例子上运行了一个测试，另外它还对jQuery的等效选择器进行了测试。我的测试结果如下:

getElementsByClassName = 1,138,018 operations / sec - <<< clear winner
querySelectorAll = 39,033 operations / sec
jquery select = 381,648 operations / sec

querySelector属于w3c Selector API

w3c室的十分

在我看来，最显著的区别是querySelectorAll的返回类型是静态节点列表，而getElementsBy的返回类型是活动节点列表。因此，演示2中的循环永远不会结束，因为lis是活动的，并且在每次迭代中更新自己。

// Demo 1 correct
var ul = document.querySelectorAll('ul')[0],
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}

// Demo 2 wrong
var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName("li"); 
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li")); 
}