强大的js原生选择器 document.querySelector()

一般常用的原生选择器有：
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');