详解JS获取HTML DOM元素的8种方法


Posted in Javascript onJune 17, 2017

什么是HTML DOM

文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

这篇文章不做深入研究,只把各种用法和坑做一个总结。

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

  1. 通过ID获取(getElementById)
  2. 通过name属性(getElementsByName)
  3. 通过标签名(getElementsByTagName)
  4. 通过类名(getElementsByClassName)
  5. 获取html的方法(document.documentElement)
  6. 获取body的方法(document.body)
  7. 通过选择器获取一个元素(querySelector)
  8. 通过选择器获取一组元素(querySelectorAll)

我们开始逐一讲解。

1.通过ID获取(getElementById)

document.getElementById('id')

用法:

1.上下文必须是document。

2.必须传参数,参数是string类型,是获取元素的id。

3.返回值只获取到一个元素,没有找到返回null。

坑~~坑坑~坑坑~坑坑~:

1.如果有多个id存在只获取第一个,也就是最先出现的哪一个。一般情况也不会出现同一个ID在页面上出现两次。

2.在IE6、7中会把表单元素的name当做ID值获取到。所以大家在定义这些的时候一定要注意。

3.在IE6、7中不区分大小写。

4.可以直接用元素的ID代表这个元素。(项目中不推荐)

5.通过ID获取元素的上下文只能是document。为什么上下文必须是document呢,因为getElementById这个方法在Document类的原型上,也许你没有听懂,那就继续往下看。

2.通过name属性(getElementsByName)

document.getElementsByName('name')

用法:

1.上下文必须是document。

2.必须传参数,参数是是获取元素的name属性。

3.返回值是一个类数组,没有找到返回空数组。

坑~~坑坑~坑坑~坑坑~:

1.获取的结果是一个类数组,不是数组。

2.在IE浏览器中只能获取到表单元素,当然我们一般也只用它获取表单元素,从ie10开始可以不只是表单元素。

3.上下文只能是document,原因同getElementById。

3.通过标签名(getElementsByTagName)

document.getElementsByTagName('p');
var oDiv = document.getElementById('divId');
oDiv.getElementsByTagName('p');

用法:

1.上下文可以是document,也可以是一个元素,注意这个元素一定要存在。

2.参数是是获取元素的标签名属性,不区分大小写。

3.返回值是一个类数组,没有找到返回空数组。

坑~~坑坑~坑坑~坑坑~:

1.获取的结果是一个类数组。

2.上下文不必须是document了,因为getElementsByTagName方法在不仅在Document类的原型上也在Element类的原型上,所以document和元素都可以使用这个方法。如果还不懂我在文章最后会再解释一下。

4.通过类名(getElementsByClassName)

用法(和getElementsByTagName类似):

1.上下文可以是document,也可以是一个元素。

2.参数是元素的类名。

3.返回值是一个类数组,没有找到返回空数组。

坑~~坑坑~坑坑~坑坑~:

1.获取的结果是一个类数组。

2.IE8以及以前版本不兼容。真可惜这么好用的方法不兼容。

5.获取html的方法(document.documentElement)

document.documentElement是专门获取html这个标签的。

6.获取body的方法(document.body)

document.body是专门获取body这个标签的。

7.通过选择器获取一个元素(querySelector)

用法:

1.上下文可以是document,也可以是一个元素。

2.参数是选择器,如:"div .className"。

3.返回值只获取到一个元素。

坑~~坑坑~坑坑~坑坑~:

这个方法不兼容IE7以及以前版本,现在似乎也没有考虑IE7兼容的公司了。

8.通过选择器获取一组元素(querySelectorAll)

用法同querySelector类似:

1.上下文可以是document,也可以是一个元素。

2.参数是选择器,如:"div .className"。

3.返回值是一个类数组。

坑~~坑坑~坑坑~坑坑~:

同querySelector,不兼容IE7。

使用原生JS获取DOM元素的8个方法讲完了,接下来在讲一下为什么有的方法只能在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方法。

其它同理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JavaScript输入框字数实时统计更新
Jun 17 #Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 #Javascript
bootstrap paginator分页前后台用法示例
Jun 17 #Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 #Javascript
深入理解Webpack 中路径的配置
Jun 17 #Javascript
详解Vue组件之间的数据通信实例
Jun 17 #Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 #Javascript
You might like
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
浅谈node的事件机制
2017/10/09 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python对url格式解析的方法
2015/05/13 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
业务内勤岗位职责
2014/04/30 职场文书
大学生个人求职信例文
2014/07/07 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
对学校的意见和建议
2015/06/04 职场文书
小学运动会通讯稿
2015/07/18 职场文书
python编写五子棋游戏
2021/05/25 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server