原生JavaScript提供了一些选择器，用于选择和操作HTML元素，下面展示下常见选择器方法和之间的区别
1） getElementById方法通过元素的唯一标识符ID来选择元素。它返回指定ID的元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){let oDiv = document.getElementById('box')console.log(oDiv)//<div id="box">我是ID</div>}</script>
</head>
<body><div id="id">我是ID</div>
</body>
</html>兼容性：getElementById方法支持所有常见浏览器版本
2） getElementsByName, 通过name属性获取元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){let aNames=document.getElementsByName('box')console.log(aNames)// NodeList(4) [div, span, div, input]}</script>
</head>
<body><div id="box">我是ID</div><div name="box">我是box1</div><span name="box">我是box2</span><div name="box">我是box3</div><br />我是pox4<input name="box" type="text" />
</body>
</html>getElementsByName方法返回的是一个NodeList集合，兼容性：IE10以下只能获取表单中带name的属性，IE10以上和chrome和FF高版本都可以兼容。（注：IE已废除不更新，所以不考虑IE下可以使用）
3） getElementsByClassName，通过元素的类名来选择元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){let aclass=document.getElementsByClassName('box')console.log(aclass)//HTMLCollection(3) [input.box, div.box, div.box]}</script>
</head>
<body><div class="box2">我是box3</div><br />我是pox4<input class="box" type="text" /><div class="box">我是box1</div><div class="box">我是box1</div>
</body>
</html>getElementsByClassName方法返回一个HTMLCollection集合。兼容性： IE9以下版本不兼容此方法，其他chrome,FF高版本兼容。（注：IE已废除不更新，所以不考虑IE下可以使用）
4）getElementsByTagName，通过元素的标签名称来选择元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){let aTags=document.getElementsByTagName('div')console.log(aTags)// HTMLCollection(4) [div#box, div, div.box, div.box, box: div#box]}</script>
</head>
<body><div id="box">我是ID</div><div name="box">我是box1</div><span name="box">我是box2</span><div class="box">我是box3</div><div class="box">我是box4</div>
</body>
</html>
getElementsByTagName方法返回一个指定标签名的所有元素的HTMLCollection集合。兼容：兼容所有IE版本和chrome\FF常见浏览器版本。
5）querySelector, 通过CSS选择器来选择元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){// 获取类名为myClass的元素（只匹配第一个）let oClass = document.querySelector('.myClass');console.log(oClass) // <div class="myClass">我是myClass1</div>// 获取ID为myId的元素let oId = document.querySelector('#myId');console.log(oId) // <div id="myId">我是myClass2</div>// 获取多条件组合的元素，选取name为'big'且class为'bigName'的a标签(只匹配第一个)let oA = document.querySelector("a[name='big'][class='bigName']");console.log(oA) // <a href="#" name="big" class="bigName">我是a1</a>// 选取class为‘classBox’的下的span标签(只匹配第一个)let oSpan = document.querySelector(".classBox span");console.log(oSpan) //<span>我是span1</span>// 选取class为‘classBox’的下的i标签(只匹配第一个)let oi = document.querySelector(".classBox > i");console.log(oi) //<i>我是i标签1</i>}</script>
</head>
<body><div class="myClass">我是myClass1</div><div class="myClass">我是myClass2</div><div id="myId">我是myClass2</div><a href="#" name="big" class="bigName">我是a1</a><a href="#" name="big" class="bigName">我是a2</a><div class="classBox"><i>我是i标签1</i><i>我是i标签2</i><span>我是span1</span><span>我是span2</span></div><div class="classBox"><span>我是span</span></div>
</body>
</html>querySelector它返回第一个匹配选择器的元素。几乎支持所有CSS选择器的方式。兼容性: IE10以下不支持，其他chrome、FF高版本支持。（注：IE已废除不更新，所以不考虑IE下可以使用）
6）querySelectorAll, 通过CSS选择器来选择元素, 返回所有匹配选择器的元素的集合。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){// 获取所有类名为myClass的元素let aClass = document.querySelectorAll('.myClass');console.log(aClass) // NodeList(2) [div.myClass, div.myClass]// 获取所有div标签元素let aDiv = document.querySelectorAll('div');console.log(aDiv) // NodeList(5) [div.myClass, div.myClass, div#myId, div.classBox, div.classBox]// 获取多个条件组合下的元素，选取name为'big'的，并且class为'bigName'的a标签let aA = document.querySelectorAll("a[name='big'][class='bigName']");console.log(aA) // NodeList(2) [a.bigName, a.bigName]// 选取class为‘classBox’的下的span标签let aSpan = document.querySelectorAll(".classBox span");console.log(aSpan) //NodeList(3) [span, span, span]// 选取class为‘classBox’的下的i标签(只匹配第一个)let ai = document.querySelectorAll(".classBox > i");console.log(ai) // NodeList(2) [i, i]// "多个" 选取条件, 用逗号隔开 (相当于 X 或 Y)let aX = document.querySelectorAll(".classX, #idY");console.log(aX) // NodeList(2) [div#idY, div.classX]// 选取类名为list下，类名为listLi的Li标签，下面的全部兄弟节点们 let aBrothers = document.querySelectorAll(".list li.listLi1 ~ li ");console.log(aBrothers)// NodeList(3) [li.listLi, li.listLi3, li.listLi2]// 选取类名为list下，类名为listLi的Li标签，紧挨着的下一个兄弟节点 let prview = document.querySelectorAll(".list li.listLi1 + li ");console.log(prview)// NodeList [li.listLi]}</script>
</head>
<body><div class="myClass">我是myClass1</div><div class="myClass">我是myClass2</div><div id="myId">我是myClass2</div><a href="#" name="big" class="bigName">我是a1</a><a href="#" name="big" class="bigName">我是a2</a><div class="classBox"><i>我是i标签1</i><i>我是i标签2</i><span>我是span1</span><span>我是span2</span></div><div class="classBox"><span>我是span</span></div><div id="idY">我是idY</div><div class="classX">我是classX</div><ul class="list"><li class="listLi4"><strong>我strong</strong></li><li class="listLi1"><strong>我strong</strong></li><li class="listLi"><p>我是p1</p><p>我是p2</p><p>我是p3</p></li><li class="listLi3"><p>我是p4</p><p>我是p5</p></li><li class="listLi2"></li></ul>
</body>
</html>总之，常见的原生JS选择器一般由上面几种方式，在当前不考虑IE的情况下（IE已停更），所有选择器都可以使用。其中querySelectorAll和querySelector最为强大，几乎支持了所有css选择器的方式，使用起来更为方便
)
