DOM操做之——获取DOM标签的9种方式

虽然如今咱们在开发中已经用不到本身操做DOM了，以前有JQ，如今更是有VUE、REACT两大框架供咱们使用，可是咱们也有必要了解下，关于原生JS中的DOM操做问题。

• 此次咱们先介绍几个DOM标签获取的方式

思惟导图

一、经过ID获取——元素对象

• 语法：document.getElementById([ID])
• 在整个文档中，根据元素的ID，得到这个元素对象
• document是获取元素的上下文（获取元素的范围）
• 获取到的结果是一个对象（堆内存：里面存储着不少内置的属性和方法）

1).getElementById 方法的上下文只能是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方法。

二、经过标签名获取——元素集合

• 语法：[context].getElementsByTagName([标签名])
• 在指定的上下文中，基于元素的标签名获取一组元素集合
• 获取的结果是HTMLCollection元素集合（类数组：数字做为索引，length表明长度）
• 集合中的每一项都是一个单独的元素对象

三、经过CLASS类名获取——元素集合

• 语法：[context].getElementsByClassName([样式类])
• 在指定上下文中，基于样式类名获取对应的元素集合
• 集合就是集合，想操做某一项须要经过索引获取后在操做
• 不兼容IE6～8低版本浏览器

四、经过NAME属性名获取——元素集合

• 语法：document.getElementsByName([NAME 属性名])
• 根据元素的Name 属性值，在整个文档中获取一组元素集合
• 真实项目中也是基于它操做表单元素的，尤为是单选框或者复选框
• 在IE9如下只对表单元素做用

五、获取HTML——元素对象

• 语法：document.documentElement
• 获取整个HTML元素对象
• HTML是页面的根节点

六、获取BODY——元素对象

• 语法：document.body

七、获取HEAD——元素对象

• 语法：document.head

八、经过CSS选择器获取——元素对象

• 语法：[context].querySelector([选择器])
• 根据选择器（相似于CSS选择器）获取一个元素对象
• 不兼容IE6~8低版本浏览器

九、经过CSS选择器获取——元素集合

• 语法：[context].querySelectorAll([选择器])
• 根据选择器（相似于CSS选择器）快速获取一组元素集合
• 哪怕只有一项也是集合
• 不兼容IE6~8低版本浏览器

在不考虑兼容的状况下，这8/9两种方法就足以获取咱们须要的元素对象和集合了