JavaScript中querySelector和querySelectorAll与getElementsByClassName和getElementById的区别

Question

JavaScript中querySelector和querySelectorAll与getElementsByClassName和getElementById的区别

263

我想知道 querySelector 和 querySelectorAll 和 getElementsByClassName 以及 getElementById 之间的区别。我在这个链接中了解到，使用querySelector可以写成document.querySelector(".myclass")来获取类名为myclass的元素，或者写成document.querySelector("#myid")来获取ID为myid的元素。但是我已经可以用getElementsByClassName和getElementById实现相同的效果。应该优先选择哪一个呢？

此外，我在XPages工作，其中ID是动态生成的，带有冒号，看起来像这样：view:_id1:inputText1。因此，当我编写document.querySelector("#view:_id1:inputText1")时，它无法正常工作。但是写成document.getElementById("view:_id1:inputText1")就可以工作。有什么想法吗？

- Naveen

1

querySelector用于查询HTML DOM树，其中可以包括HTML元素及其属性作为查询的关键元素...您可以使用正则表达式来实现这一点...dojo.query()也可以做同样的事情。 - anix

1

你是不是想说 document.querySelectorAll(".myclass")？使用 document.querySelector(".myclass") 只会返回第一个匹配的元素。 - mhatch

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ajay verma · Answer 1

querySelector和getElementById（ClassName，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。