高级选择器querySelector和querySelectorAll

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>

浏览器兼容性

4.0+	3.5+	8+	10.0+	3.1+