详解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 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
再谈JavaScript线程
Jul 10 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
小程序实现筛子抽奖
May 26 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如何编写易读的代码
2007/07/10 PHP
小谈php正则提取图片地址
2014/03/27 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python从MP3文件获取id3的方法
2015/06/15 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Saltstack快速入门简单汇总
2016/03/01 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python简单实现AES加密和解密
2019/03/28 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
会话Bean的种类
2013/11/07 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
2013年高中生自我评价
2013/10/23 职场文书
新学期家长寄语
2014/01/19 职场文书
公司委托书格式范文
2014/04/04 职场文书
庆七一活动总结
2014/08/27 职场文书
小学校长个人总结
2015/03/03 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL