原生JS-常用选择器详解

原生JavaScript提供了一些选择器，用于选择和操作HTML元素，下面展示下常见选择器方法和之间的区别

1） getElementById方法通过元素的唯一标识符ID来选择元素。它返回指定ID的元素。

兼容性：getElementById方法支持所有常见浏览器版本

2） getElementsByName, 通过name属性获取元素

我是box2

我是pox4

getElementsByName方法返回的是一个NodeList集合，兼容性：IE10以下只能获取表单中带name的属性，IE10以上和chrome和FF高版本都可以兼容。（注：IE已废除不更新，所以不考虑IE下可以使用）

3） getElementsByClassName，通过元素的类名来选择元素。

我是pox4

getElementsByClassName方法返回一个HTMLCollection集合。兼容性： IE9以下版本不兼容此方法，其他chrome,FF高版本兼容。（注：IE已废除不更新，所以不考虑IE下可以使用）

4）getElementsByTagName，通过元素的标签名称来选择元素。

我是box2

getElementsByTagName方法返回一个指定标签名的所有元素的HTMLCollection集合。兼容：兼容所有IE版本和chrome\FF常见浏览器版本。

5）querySelector, 通过CSS选择器来选择元素

我是a1

我是a2

querySelector它返回第一个匹配选择器的元素。几乎支持所有CSS选择器的方式。兼容性: IE10以下不支持，其他chrome、FF高版本支持。（注：IE已废除不更新，所以不考虑IE下可以使用）

6）querySelectorAll, 通过CSS选择器来选择元素, 返回所有匹配选择器的元素的集合。

我是a1

我是a2

• 我strong

• 我strong

• 我是p1

  我是p2

  我是p3

• 我是p4

  我是p5

总之，常见的原生JS选择器一般由上面几种方式，在当前不考虑IE的情况下（IE已停更），所有选择器都可以使用。其中querySelectorAll和querySelector最为强大，几乎支持了所有css选择器的方式，使用起来更为方便