JS----获取DOM元素的⽅法（8种）
什么是HTML DOM
⽂档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语⾔的标准编程接⼝。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
我们⽤JavaScript对⽹页进⾏的所有操作都是通过DOM进⾏的。
这篇⽂章不做深⼊研究，只把各种⽤法和坑做⼀个总结。
JS获取DOM元素的⽅法（8种）
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的⽅法（document.documentElement）
获取body的⽅法（document.body）
通过选择器获取⼀个元素（querySelector）
通过选择器获取⼀组元素（querySelectorAll）
我们开始逐⼀讲解。
1.通过ID获取（getElementById）
⽤法：
1.上下⽂必须是document。
2.必须传参数，参数是string类型，是获取元素的id。
3.返回值只获取到⼀个元素，没有到返回null。
坑~~坑坑~坑坑~坑坑~：
1.如果有多个id存在只获取第⼀个，也就是最先出现的哪⼀个。⼀般情况也不会出现同⼀个ID在页⾯上出现两次。
2.在IE6、7中会把表单元素的name当做ID值获取到。所以⼤家在定义这些的时候⼀定要注意。
3.在IE6、7中不区分⼤⼩写。
4.可以直接⽤元素的ID代表这个元素。（项⽬中不推荐）
html document是什么5.通过ID获取元素的上下⽂只能是document。为什么上下⽂必须是document呢，因为getElementById这个⽅法在Document类的原型上，也许你没有听懂，那就继续往下看。
2.通过name属性（getElementsByName）
⽤法：
1.上下⽂必须是document。
2.必须传参数，参数是是获取元素的name属性。
3.返回值是⼀个类数组，没有到返回空数组。
坑~~坑坑~坑坑~坑坑~：
1.获取的结果是⼀个类数组，不是数组。
2.在IE浏览器中只能获取到表单元素，当然我们⼀般也只⽤它获取表单元素，从ie10开始可以不只是表单元素。
3.上下⽂只能是document，原因同getElementById。
3.通过标签名（getElementsByTagName）
var oDiv = ElementById('divId');
⽤法：
1.上下⽂可以是document，也可以是⼀个元素，注意这个元素⼀定要存在。
2.参数是是获取元素的标签名属性，不区分⼤⼩写。
3.返回值是⼀个类数组，没有到返回空数组。
坑~~坑坑~坑坑~坑坑~：
1.获取的结果是⼀个类数组。
2.上下⽂不必须是document了，因为getElementsByTagName⽅法在不仅在Document类的原型上也在Element类的原型上，所以document和元素都可以使⽤这个⽅法。
如果还不懂我在⽂章最后会再解释⼀下。
4.通过类名（getElementsByClassName）
⽤法（和getElementsByTagName类似）：
1.上下⽂可以是document，也可以是⼀个元素。
2.参数是元素的类名。
3.返回值是⼀个类数组，没有到返回空数组。
坑~~坑坑~坑坑~坑坑~：
1.获取的结果是⼀个类数组。
2.IE8以及以前版本不兼容。真可惜这么好⽤的⽅法不兼容。
5.获取html的⽅法（document.documentElement）
document.documentElement是专门获取html这个标签的。
6.获取body的⽅法（document.body）
document.body是专门获取body这个标签的。
7.通过选择器获取⼀个元素（querySelector）
⽤法：
1.上下⽂可以是document，也可以是⼀个元素。
2.参数是选择器，如："div .className"。
3.返回值只获取到⼀个元素。
坑~~坑坑~坑坑~坑坑~：
这个⽅法不兼容IE7以及以前版本，现在似乎也没有考虑IE7兼容的公司了。
8.通过选择器获取⼀组元素（querySelectorAll）
⽤法同querySelector类似：
1.上下⽂可以是document，也可以是⼀个元素。
2.参数是选择器，如："div .className"。
3.返回值是⼀个类数组。
坑~~坑坑~坑坑~坑坑~：
同querySelector，不兼容IE7。
使⽤原⽣JS获取DOM元素的8个⽅法讲完了，接下来在讲⼀下为什么有的⽅法只能在document上使⽤。
拿div举栗⼦，div是HTMLDivElement类的⼀个实例，document是HTMLDocument 的实例。
他们的继承关系：
HTMLDivElement > HTMLElement > Element > Node > EventTarget
HTMLDocument > Document > Node > EventTarget
我们都知道⼦类继承⽗类，⼦类就可以使⽤⽗类的属性和⽅法。
他们相同的继承关系是Node和EventTarget，也就是说他们都可以使⽤Node和EventTarget上的⽅法。
如Node上的nodeName、parentNode等，和EventTarget上的addEventListener等。
getElementById只在Document类的原型上，HTMLDivElement 没有继承Document类，所以div不能使⽤getElementById⽅法。getElementsByTagName即在Document类的原型上也在Element类的原型上，所以div和document都可以使⽤getElementsByTagName⽅法。
其它同理。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。