querySelector()方法返回文档中匹配指定CSS选择器的一个元素，是单个DOM元素，querySelectorAll()返回的是NodeList。其实有点类似getElementById()和getElementsByTagName()的区别。

这两个方法接受一个CSS选择字符串并返回一个匹配该选择的DOM结点列表。该选择方法在现在主流的浏览器（IE从8.0以后都支持）中都是支持的，并且会比使用其他DOM方法实现选择要快得多。

<div class="container">
<p>段落元素</p>
</div>
oContainer2=.log(oContainer);
.log(oContainer3);

我们一般用的多的是document.querySelectorAll(), 实际上，也支持dom.querySelectorAll() 例如：

1 document.querySelector('.container').querySelector('p'); //<p>段落元素</p>

在我们想获取元素的HTML结构不复杂的情况下，感觉和通过id以及TagName获取的方法区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候querySelector()和querySelectorAll()的优势就发挥出来了，比如接下来的例子：

<div class="container">
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
</div>

我们需要获取class="container"的div元素下的第一和最后一个p标签，在之前，在不借助第三方库的情况下，我们通常会用getElementsByTagName先获取所有的p标签，然后用下标来指向第一和最后一个p。现在，我们可以这样写：

.querySelector('.container').querySelector('p:last-child'); //<p>555</p>

还可以结合CSS3选择器实现更高级的功能：

.querySelector('.container').querySelectorAll('p:nth-of-type(odd)');

PS：感谢网友来到前端开发分享网学习~~ 欢迎大家扫二维码学习更多相关前端知识!!
转载请注明原文/译文出处、译文超链接和译者等信息，否则视为侵权，谢谢合作！