document.querySelector()和document.querySelectorAll()用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。

所以CSS 选择器支持的语法，querySelector() 都可以使用。下面例举了一些常用的用法：

实例：获取文档中第一个 <p> 元素

document.querySelector("p");

---

实例：获取文档中 id="demo" 的元素

document.querySelector("#demo");

---

实例：获取文档中 class="example" 的第一个元素

document.querySelector(".example");

---

实例：获取文档中有 "target" 属性的第一个 <a> 元素

document.querySelector("a[target]");

---

实例：获取文档中 <h1> 或 <h2> 第一个匹配到的元素（多选择器用逗号”，“隔开）

document.querySelector("h1, h3");

---

实例：获取文档中一个class属性为"user-panel main"的div元素内包含一个name属性为"login"的input元素

document.querySelector("div.user-panel.main input[name='login']");