首页 > web前端 > js教程 > JavaScript怎么获取DOM元素

JavaScript怎么获取DOM元素

青灯夜游
发布: 2023-01-04 09:34:57
原创
6213 人浏览过

方法:1、用getElementById方法通过ID获取;2、用getElementsByName方法通过name值获取;3、用getElementsByTagName方法通过标签名获取;4、用querySelector方法通过选择器获取。

JavaScript怎么获取DOM元素

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

JS获取DOM元素的方法(8种)

  • 通过ID获取(getElementById)
  • 通过name属性(getElementsByName)
  • 通过标签名(getElementsByTagName)
  • 通过类名(getElementsByClassName)
  • 通过选择器获取一个元素(querySelector)
  • 通过选择器获取一组元素(querySelectorAll)
  • 获取html的方法(document.documentElement)
  • document.documentElement是专门获取html这个标签的
  • 获取body的方法(document.body)
  • document.body是专门获取body这个标签的。

1、通过ID获取(getElementById)

document.getElementById('id')
登录后复制
  • 上下文必须是document。
  • 必须传参数,参数是string类型,是获取元素的id。
  • 返回值只获取到一个元素,没有找到返回null。

2、通过name属性(getElementsByName)

document.getElementsByName('name')
登录后复制
  • 上下文必须是document,内容
  • 必须传参数,参数是是获取元素的name属性。
  • 返回值是一个类数组,没有找到返回空数组。

【推荐学习:javascript高级教程

3、通过标签名(getElementsByTagName)

1.png

  • 上下文可以是document,也可以是一个元素,注意这个元素一定要存在。
  • 参数是是获取元素的标签名属性,不区分大小写。
  • 返回值是一个类数组,没有找到返回空数组

4、通过类名(getElementsByClassName)

var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated
登录后复制
  • 上下文可以是document,也可以是一个元素。
  • 参数是元素的类名。
  • 返回值是一个类数组,没有找到返回空数组。

5、通过选择器获取一个元素(querySelector)

document.querySelector('.animated')
登录后复制
  • 上下文可以是document,也可以是一个元素。
  • 参数是选择器,如:”p .className”。
  • 返回值只获取到第一个元素。

6、通过选择器获取一组元素(querySelectorAll)

document.querySelector('.animated')
登录后复制
  • 上下文可以是document,也可以是一个元素。
  • 参数是选择器,如:”p .className”。
  • 返回值是一个类数组。

更多编程相关知识,请访问:编程视频!!

以上是JavaScript怎么获取DOM元素的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板