在JavaScript中的querySelector和querySelectorAll与getElementsByClassName和getElementById
我想知道究竟是什么区别querySelector和querySelectorAll对getElementsByClassName和getElementById ？
从这个链接我可以收集与querySelector我可以写document.querySelector(".myclass")获取元素与类myclass和document.querySelector("#myid")获取ID为ID的myid 。 但我已经可以做getElementsByClassName和getElementById 。 哪一个应该是首选？
另外我工作在XP中，ID是用冒号dynamic生成的，看起来像这样view:_id1:inputText1 。 所以当我写document.querySelector("#view:_id1:inputText1")不起作用。 但是编写document.getElementById("view:_id1:inputText1")作品。 任何想法为什么？
我想知道究竟是什么区别querySelector和querySelectorAll对getElementsByClassName和getElementById？
语法和浏览器支持。
当你想使用更复杂的select器时， querySelector更有用。
例如所有列表项都来自foo类成员的元素： .foo li
document.querySelector（“＃view：_id1：inputText1”）它不起作用。 但是编写document.getElementById（“view：_id1：inputText1”）的作品。 任何想法为什么？
:字符在select器中有特殊的含义。 你必须逃避它。 （select转义字符在JSstring中也有特殊含义，所以你也必须转义）。
document.querySelector("#view\\:_id1\\:inputText1")
从Mozilla收集文档：
NodeSelector接口此规范为实现Document，DocumentFragment或Element接口的任何对象添加了两个新方法：
querySelector
返回节点的子树中第一个匹配的Element节点 。 如果找不到匹配的节点，则返回null。
querySelectorAll
返回包含节点子树中所有匹配元素节点的节点列表，如果找不到匹配，则返回空的节点列表。
和
注意：
querySelectorAll()返回的NodeList不是活的。 这与返回活节点列表的其他DOM查询方法不同。
关于差异，在querySelectorAll和getElementsByClassName之间的结果中有一个重要的区别：返回值是不同的。 querySelectorAll将返回一个静态集合，而getElementsByClassName将返回一个实时集合。 如果将结果存储在variables中供以后使用，这可能会导致混淆：
- 使用
querySelectorAll生成的variables将包含在调用方法时满足select器的元素。 - 使用
getElementsByClassName生成的variables将包含在使用select器时实现的元素（可能与调用该方法的时刻不同）。
例如，请注意，即使您没有重新分配variablesaux1和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可以是一个完整的CSS（3） – select器ID和类和伪类一起这样的：
'#id.class:pseudo' // or 'tag #id .class .class.class'
用getElementByClassName你可以定义一个类
'class'
用getElementById你可以定义一个id
'id'
querySelector和querySelectorAll是一个相对较新的API，而getElementById和getElementsByClassName已经和我们在一起了很长时间了。 这意味着您使用的内容主要取决于您需要支持的浏览器。
至于: ，它有一个特殊的含义，所以如果你必须使用它作为ID /类名的一部分，你必须逃避它。
我来到这个页面纯粹是为了找出更好的方法来使用性能 – 即哪个更快：
querySelector / querySelectorAll or getElementsByClassName
我发现这个： https : //jsperf.com/getelementsbyclassname-vs-queryselectorall/18
它在上面的2个示例上运行testing，另外它还为jQuery的等效select器进行testing。 我的testing结果如下：
getElementsByClassName = 1,138,018 operations / sec - <<< clear winner querySelectorAll = 39,033 operations / sec jquery select = 381,648 operations / sec
