阅读 1366
DOM操作之——获取DOM标签的9种方式

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

虽然现在我们在开发中已经用不到自己操作DOM了,之前有JQ,现在更是有VUEREACT两大框架供我们使用,但是我们也有必要了解下,关于原生JS中的DOM操作问题。

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

思维导图

1、通过ID获取——元素对象

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

1).getElementById 方法的上下文只能是document

  • div举栗子,divHTMLDivElement类的一个实例,documentHTMLDocument 的实例。

  • 他们的继承关系:

    • HTMLDivElement > HTMLElement > Element > Node > EventTarget
    • HTMLDocument > Document > Node > EventTarget

我们都知道子类继承父类,子类就可以使用父类的属性和方法。

  • 他们相同的继承关系是NodeEventTarget,也就是说他们都可以使用NodeEventTarget上的方法。
  • Node上的nodeNameparentNode等,和EventTarget上的addEventListener等。
  • getElementById只在Document类的原型上,HTMLDivElement 没有继承Document类,所以div不能使用getElementById方法。

后面要说到的getElementsByTagName方法则是即在Document类的原型上也在Element类的原型上,所以divdocument都可以使用getElementsByTagName方法。

2、通过标签名获取——元素集合

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

3、通过CLASS类名获取——元素集合

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

4、通过NAME属性名获取——元素集合

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

5、获取HTML——元素对象

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

6、获取BODY——元素对象

  • 语法:document.body

7、获取HEAD——元素对象

  • 语法:document.head

8、通过CSS选择器获取——元素对象

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

9、通过CSS选择器获取——元素集合

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

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

文章分类
阅读
文章标签