Skip to content

获取dom元素的几种方式

  • 按使用频率排序
  • 低版本浏览器 === < IE8

1.document.getElementById

简介

通过元素的id获取

  • 存在 -- 则返回这个元素
  • 不存在 -- 返回null

特点

  • 如果文档中存在多个相同的id,则获取第一个
  • 在一些低版本浏览器会把元素的name当做id获取
  • 上下文只能是document

2.document.getElementsByClassName

简介

通过元素的类名获取

  • 存在 -- 返回由目标元素组成的HTMLCollectio
  • 不存在 -- 返回一个空的HTMLCollectio
    • HTMLCollectio是类数组

特点

  • 获取的结果是一个类数组
  • 上下文可以是任意元素(document或其它dom元素)
  • 在一些低版本浏览器不支持

3.document.querySelector

简介

通过选择器获取一个元素

特点

  • 上下文可以是任意元素(document或其它dom元素)
  • 低版本浏览器不兼容
  • 返回值是类数组

4.document.querySelectorAll

简介

通过选择器获取一组元素

特点

  • 同querySelector

5.document.getElementsByTagName

简介

通过标签名获取

特点

  • 上下文可以是任意元素(document或其它dom元素)
  • 返回值是类数组
  • 参数是标签名,不区分大小写

6.document.getElementsByName

简介

通过元素的name属性获取

特点

  • 上下文只能是document
  • 返回值是类数组
  • 在IE浏览器中只能获取到表单元素,当然我们一般也只用它获取表单元素,从ie10开始可以不只是表单元素

7.document.body

获取body这个元素

8.document.documentElement

获取html这个元素

9.document.getElementsByTagNameNS

返回带有指定名称和命名空间的所有元素的 NodeList

js
nodeList = document.getElementsByTagNameNS(namespace, name)
nodeList = document.getElementsByTagNameNS(namespace, name)

说实话,这个API目前在我的学习/工作中还没找到落地之处😢😢

元素之间的继承关系

图片

每个元素都有对应的类,因此每个类都提供了一些方法来操作元素本身

通过类之间的继承关系,丰富元素的可操作性

由于getElementByIdgetElementsByName方法是在Document类上,于是普通元素的实例对象是没有这两方法的,所以这两方法的上下文只能是document

总结

  1. 上下文只能是document的方法
    • getElementById
    • getElementsByName
  2. 上下文为任意元素的方法
    • getElementsByClassName
    • getElementById
    • querySelectorAll
    • getElementsByTagName
    • getElementsByTagNameNS
  3. 查询效率最高的是
    • getElementById:由于id在正常情况下是独一无二的,所以查询是很高效的
  4. 返回值
    • 只有getElementByIdgetElementById返回对象本身
    • 其余查询方法均返回一个类数组HTMLCollectio

更新于: