JavaScript中的querySelector和querySelectorAll

Question

JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById我想知道究竟是什么之间的差异querySelector和querySelectorAll对抗getElementsByClassName和getElementById？从这个链接我可以收集，querySelector我可以编写document.querySelector(".myclass")获取类的元素，myclass并document.querySelector("#myid")获取ID元素myid。但我已经可以做到这一点getElementsByClassName和getElementById。应该首选哪一个？我也在XPage中工作，其中ID是用冒号动态生成的，看起来像这样view:_id1:inputText1。所以当我写document.querySelector("#view:_id1:inputText1")它不起作用。但写作document.getElementById("view:_id1:inputText1")有效。有什么想法吗？

Answer 1

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.

如果我们想要为查询选择器选择单个元素，或者如果我们想要多个元素用于getElement，则为Inshort

Answer 2

我想知道querySelector和querySelectorAll对getElementsByClassName和getElementById的区别究竟是什么？

语法和浏览器支持。

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

例如，所有列表项都来自作为foo类成员的元素： .foo li

document.querySelector（“＃view：_id1：inputText1”）它不起作用。但是编写document.getElementById（“view：_id1：inputText1”）可以正常工作。有什么想法吗？

该:字符有选择内部特殊的意义。你必须逃脱它。（选择器转义字符在JS字符串中也有特殊含义，所以你也必须转义它）。

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