一般常用的原生选择器有：
id选择器:document.getElementById("test");
name选择器:document.getElementsByName("test");
节点选择器:document.getElementsByTagName("p");
class选择器:document.getElementsByClassName("test");
这次要详细说的是 document.querySelector()， 开挂般的存在， jQuery的完美替代版本。
语法
接收一个字符串参数， 返回返文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。 如果找不到匹配项，则返回null。
let element = document.querySelector('selectors');
用法
- 返回当前文档中第一个类名为 "myclass" 的元素
let el = document.querySelector(".myclass");
- 返回一个class属性为"user-panel main"的div元素(
<div class="user-panel main">)，内包含一个name属性为"login"的input元素 (<input name="login"/>)
let el = document.querySelector("div.user-panel.main input[name='login']");
3.返回带有foo或者bar样式类的首个元素
let el = document.querySelector('.foo, .bar');
4.返回id为‘my-element’的 p 元素
let el = document.querySelector("p[id='my-element']")
- 返回 data-val 属性为 111的元素
<div id="my-element" data-val="111" >你好</div>
let el = document.querySelector("[data-val='111']")
6.其他选择方式可自行排列组合
注意
document.querySelector() 的用法虽然与jQuery里的$()选择器类似,但有些细微区别:
1. querySelector只能选择第一个匹配的节点；
2. querySelectorAll 可以选择多个节点,以","分隔开,返回的是个数组；
其他高级用法与jq基本一致,如后代选择器：
document.querySelector("#app1>.item1");
var Span = document.querySelector('#box span');
