Javascript新提供的querySelector和querySelectorAll方法，是仿照CSS选择器功能编写的
querySelector
功能：该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素，如例：
<div>
<div>
<div>
<p>第三层</p>
</div>
<p>第二层</p>
</div>
<p>第一层</p>
</div>
<script type="text/javascript">
var P = document.querySelector('p'); //结果：<p>第三层</p>
</script>
querySelectorAll
功能：该方法返回所有满足条件的元素，结果是节点集合，查找规则与querySelector方法一样，如例：
<div>
<div>
<div>
<p>第三层</p>
</div>
<p>第二层</p>
</div>
<p>第一层</p>
</div>
<script type="text/javascript">
var P = document.querySelectorAll('p'); //选中顺序：<p>第三层</p> <p>第二层</p> <p>第一层</p>
</script>
选择器格式支持
选择器的书写方式和jQuery完全相同，在性能上，jquerySelector/jquerySelectorAll比jQuery相应选择器的性能更好，不过jquerySelector/jquerySelectorAll只兼顾了jQuery选择器的一部分功能。
| 选择器格式 | 功能描述 |
| * | 匹配所有元素 |
| element | 根据给定的元素名匹配所有元素 |
| #id | 根据给定的ID匹配一个元素 |
| .class | 根据给定的类匹配元素 |
| selector, selector | 将每一个选择器匹配到的元素合并后一起返回 |
| ancestor descendant | 在给定的祖先元素下匹配所有的后代元素 |
| parent>child | 在给定的父元素下匹配所有的子元素 |
| prev+next | 匹配所有在 prev 元素后的相邻next 元素 |
| prev~siblings | 匹配 prev 元素之后的所有 siblings 元素 |
| [attribute] | 匹配包含给定属性的元素 |
| [attribute=value] | 匹配给定的属性是某个特定值的元素 |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 |
| [attribute][attribute] | 复合属性选择器，需要同时满足多个条件时使用 |
注意：不支持所有的冒号选择器(类似:first-child)以及[attribute!=value]属性选择器
浏览器兼容性
| 4.0+ | 3.5+ | 8+ | 10.0+ | 3.1+ |