JS获取DOM的几种方法
导读：本文共2653字符，通常情况下阅读需要9分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： JS获取DOM和几种方法下面依次讲解：1.通过ID获取（getElementById）<div id="id1"></div><script> let box= document.getElementById("id1");</script>上下文必须是document。必须传参数，参数是str... ...
目录
(为您整理了一些要点),点击可以直达。
下面依次讲解：
1.通过ID获取（getElementById）
上下文必须是document。
必须传参数，参数是string类型，是获取元素的id。
返回值只获取到一个元素，没有找到返回null。
2.通过name属性（getElementsByName）
只有含有name属性的元素(表单元素)才能通过name属性获取
上下文必须是document。
必须传参数，参数是是获取元素的name属性。
返回值是一个类数组，没有找到返回空数组
3.通过标签名（getElementsByTagName）
该方法返回的也是一个集合。
4.通过类名（getElementsByClassName）
getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件
IE8以及以前版本不兼容
5.获取html的方法（document.documentElement）
6.获取body的方法（document.body）
7.通过选择器获取一个元素（querySelector）
querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id选择器。此方法直接返回DOM对象本身
不兼容IE7以及以前版本
8.通过选择器获取一组元素（querySelectorAll）
不兼容IE7
querySelector()和querySelectorAll()方法括号中的取值都是选择器。
当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。
DOM元素的继承关系
他们相同的继承关系是Node和EventTarget，也就是说他们都可以使用Node和EventTarget上的方法。
如Node上的nodeName、parentNode等，和EventTarget上的addEventListener等。
getElementById只在Document类的原型上，HTMLDivElement 没有继承Document类，所以div不能使用getElementById方法。
getElementsByTagName即在Document类的原型上也在Element类的原型上，所以div和document都可以使用getElementsByTagName方法。
其它同理。
总结：
JS获取DOM的几种方法的详细内容，希望对您有所帮助，信息来源于网络。