querySelector()
querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素。
querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，如 ：:nth-child()、:[src^="dog"]等CSS3选择器形式都支持良好
注：使用此方法必须不要忘记使用# .
<div id="box1">
<p>我是段落</p>
<p class="spec">我是段落</p>
<p>我是段落</p>
</div>
<script>
// var the_p = document.querySelector('#box1 .spec');
var the_p = document.querySelector('#box1 p:nth-child(1)');
console.log(the_p);
</script>
querySelectorAll
querySelectorAll方法的功能是通过选择器得到元素数组
即使页面上只有一个符合选择器的节点，也将得到长度为1 的数组
注：使用此方法必须不要忘记使用# .
<body>
<ul id="list1">
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ul id="list2">
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
var lis_inlist1 = document.querySelectorAll('#list1 li');
console.log(lis_inlist1);
</script>
</body>
