我想知道querySelector和querySelectorAll对getElementsByClassName和getElementById的区别到底是什么?
从这个链接,我可以用querySelector收集,我可以写document.querySelector(".myclass")来获得类myclass的元素,文档.querySelector("#myid")来获得ID为myid的元素。但我已经可以做到getElementsByClassName和getElementById。应该优先选择哪一种?
我还在XPages中工作,其中ID是用冒号动态生成的,类似于以下视图:_id1:inputText1。所以当我写document.querySelector(“#view:_id1:inputText1”)时,它不起作用。但是写document.getElementById("view:_id1:inputText1")是有效的。知道为什么吗?
我想知道querySelector和querySelectorAll对getElementsByClassName和getElementById的区别到底是什么?
语法和浏览器支持。
当您想使用更复杂的选择器时,querySelector更有用。
例:所有从foo类成员元素派生的列表项:.foo li
document.querySelector("#view:_id1:inputText1")不起作用。但是写document.getElementById("view:_id1:inputText1")是有效的。知道为什么吗?
字符在选择器中有特殊的含义。你必须逃离它。(选择器转义字符在JS字符串中也有特殊的含义,所以你也必须转义它)。
document.querySelector("#view\\:_id1\\:inputText1")
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"));
}
我来到这个页面纯粹是为了找出更好的方法来使用性能-即哪个更快:
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