querySelector 和 querySelectorAll 的使用

querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和 CSS 的写法完全一样，
对于前端开发人员来说，这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV，为了获取到这个元素，
你也许会像下面这样：

document.getElementById("test");

document.querySelectorAll("#test")[0];

现在我们来试试使用新方法来获取这个元素：

比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，
当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];

现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了，是的，它接收的参数和 CSS 选择器完全一致。
querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。
querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组，
如果没有匹配的元素则返回的数组为空。