JS----获取DOM元素的方法(8种)
什么是HTML DOM
文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
这篇文章不做深入研究,只把各种用法和坑做一个总结。
JS获取DOM元素的方法(8种)
通过ID获取(getElementById)
通过name属性(getElementsByName)
通过标签名(getElementsByTagName)
通过类名(getElementsByClassName)
获取html的方法(document.documentElement)
获取body的方法(document.body)
通过选择器获取一个元素(querySelector)
通过选择器获取一组元素(querySelectorAll)
我们开始逐一讲解。
1.通过ID获取(getElementById)
用法: 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)
用法: 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方法。 其它同理。
JS----获取DOM元素的方法(8种)的更多相关文章
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- JS选取DOM元素的方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...
- JS获取DOM元素
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
- js获取dom元素的子元素,父元素,兄弟元素小记
原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...
- vue1和vue2获取dom元素的方法
vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 例如:<div class='box' v-el: myBox>你好</ ...
- vue1和vue2获取dom元素的方法 及 nextTick() 、$nextTick()
vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 例如:<div class='box' el='myBox'>你好</d ...
- [原]js获取dom元素的实际位置及相对坐标
关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/ ...
- JQuery获取Dom元素的方法
(function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(sel ...
随机推荐
- Struts2学习:HelloWorld
项目结构: 1.用IDEA新建一个SpringBoot+Maven的项目 2.新建的项目是没有webapp.WEB-INF.与web.xml文件的,需要在下图中添加: 3.在pom.xml引入stru ...
- 'pip' 不是内部或外部命令
安装好Python,在环境变量Path中加入相应路径信息后,Python命令没问题,但是运行pip失败: 'pip' 不是内部或外部命令,Pip工具已经自带安装好了,只是跟Python命令一样,需要我 ...
- 0. 前言【从零开始学Spring Boot】
[视频&交流平台] àSpringBoot视频 http://study.163.com/course/introduction.htm?courseId=1004329008&utm ...
- C#用log4net记录日志
1.首先安装 log4net. 2.新建 log4net.config 文件,右键-属性 “复制到输出目录”设置为“始终复制” 3.设置 log4net.config 配置文件 <?xml ve ...
- 3. powerdesigner 生成mysql脚本,要求字段、表名有注释
1.字段注释设置 : 在 pdm 视图中,Database --> Edit Current DBMS. 找到 MySql5.0 --> Script --> Objects --& ...
- journalctl
systemd 提供了自己的日志系统(logging system),称为 journal.使用 systemd 日志,无需额外安装日志服务(syslog).读取日志的命令: # journalctl ...
- Ubuntu系统安装
一:Ubuntu14.04 安装及使用:[1]制作安装U盘(选择USB-HDD+”并单击后, 一定要点“写入”,注意,“写入”是一个按钮) 以下是详细的连接步骤: https:// ...
- sql server 2014登录账号
NT Service\MSSQL$MSSQLSERVER2014NT Service\MSSQLSERVER 尝试打开或创建物理文件 'E:\aaa.mdf' 时,CREATE FILE 遇到操作系统 ...
- ArrayList、LinkedList、Vector的区别。
1. 对于ArrayList与Vector来说,底层都是采用数组方式来实现的 2. ArrayList,LinkedList是不同步的,即线程不安全,而Vector是的.(线程安不安全) 3. Lin ...
- JEECG 3.7.3 新春版本发布,企业级JAVA快速开发平台
JEECG 3.7.3新春版本发布 - 微云快速开发平台 导读 ⊙精美Echart报表 ⊙二维码生成功能 ⊙Online接口改造采用JWT机制 ⊙智能菜单搜索 ⊙代码生成器模板优 ...