原生javascript获取元素的几种方法
站在巨人肩上的猴子
说明：日常开发中，我们常常遇到需要获取DOM对象，对对象元素进行修改情况，一般就会从Id、class、标签等去获取，下面就介绍几种方法，基本涵盖了所有的获取方法
方法简介：
1、通过ID获取（getElementById）
2、通过name属性（getElementsByName）
3、通过标签名（getElementsByTagName）
4、通过类名（getElementsByClassName）
5、通过CSS选择器获取（querySelector、querySelectorAll）
具体说明：
1、通过ID获取；
js代码：
var domById = document.getElementById('id');
1
html元素：
<div id = 'id'></div>
1
注意：
1）、如果没有指定 ID 的元素返回 null；
2）、如果存在多个指定 ID 的元素则返回第一个；
3）、该方法是document级别的，并且只能在当前document中查找，无法跨document
2、通过name属性获取；
js代码：
var domByName = document.getElementsByName('name');
1
html元素
<div name = 'name'></div>
1
注意：
1）、因为一个document中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以getElementsByName() 方法返回的是元素的数组，而不是一个元素；
2）、该方法与getElementById一样是document级别的，并且只能在当前document中查找，无法跨document。
3、通过标签名获取；
js代码：
//document级别
var domByTagName = document.getElementsByTagName('div');
//元素（element）级别
var domById = document.getElementById('id');
var domByTagName = domById.getElementsByTagName('span');
html代码：
<!--document级别-->
<div></div>
<!--element级别-->
<div id = 'id'>
<span></span>
<span></span>
</div>
注意：
1）、document中有很多标签，一般情况下，标签都不会是唯一的，所以该方法的返回对象是一个集合；
2）、参数值 “*” 返回document中的所有元素；
3）、该方法可以是document级别，也可以是element级别，可以缩小范围，精准获取元素。
4、通过类名获取；
js代码：
//document级别
var domByClassName = document.getElementsByClassName('className');
//元素（element）级别
var domById = document.getElementById('id');
var domByClassName = domById.getElementsByClassName('className');
html代码：
<!--document级别-->
<div></div>
<!--element级别-->
<div id = 'id'>
<span class = 'className'></span>
<span class = 'className'></span>
</div>
注意：
1）、document中有很多class同名的元素，所以该方法的返回值是一个集合；
2）、该方法可以是document级别，也可以是element级别，可以缩小范围，精准获取元素。
5、通过CSS选择器获取；
js代码：
//取得 body 元素
var body = document.querySelector("body");
//取得 ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"selected"的全部元素
var selecteds = document.querySelectorAll(".selected");
1
html代码：
<body>
<div id = 'myDiv'></div>
<div class='selected'></div>
<div class='selected'></div>
</body>
注意：
1）、CSS 选择符可以简单也可以复杂，视情况而定，如果传入了不被支持的选择符，querySelector()、querySelectorAll()会抛出错误;
2）、如果没有找到匹配的元素，返回值就是空的；
3）、该方法可以是document级别，也可以是element级别，可以缩小范围，精准获取元素。
小结：
以上仅介绍了用法和一些注意事项，具体更深入的知识点，需要去了解其原理（比如CSS选择符之类的）。
————————————————
版权声明：本文为CSDN博主「站在巨人肩上的猴子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_33775006/article/details/106210600
