JS1 js获取dom元素方法
js获取dom元素方法
1、通过ID选取元素(getElementById)
1)使用方法:document.getElementById("domId")
其中,domId为要选取元素的id属性值
2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素。
2、通过名称name选取元素(getElementsByName)
1)使用方法:document.getElementsByName("domName")
其中,domName为要选取元素的name属性值
2)说明:a. 返回值是一个nodeList集合(区别于Array)
b. 和ID属性不一样,name属性只在少数DOM元素中有效(form表单、表单元素、iframe、img)。这是因为name属性是为了方便提交表单数据而打造的。
c. 为form、img、iframe、applet、embed、object元素设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象
3)兼容性:IE中ID属性值匹配的元素也会一起返回
3、通过标签名选取元素(getElementsByTagName)
1)使用方法:element.getElementsByTagName("tagName")
其中,element是有效的DOM元素(包括document)
tagName是DOM元素的标签名
2)说明:a. 返回值是一个nodeList集合(区别于Array)
b. 该方法只能选取调用该方法的元素的后代元素。
c. tagName不区分大小写
d. 当tagName为*时,表示选取所有元素(需遵从b.规则)
e. HTMLDocument会定义一些快捷属性来访问标签节点。如:document的images、forms、links属性指 向<img>、<form>、<a>标签元素集合,而document.body和document.head总是 指向body和head标签(当未显示声明head标签时,浏览器也会创建document.head属性)
4、通过CSS类选取元素(getElementsByClassName)
1)使用方法:element.getElementsByClassName("classNames")
其中,element是有效的DOM元素(包括document)
classNames是CSS类名称的组合(多个类名之间用空格,可以是多个空格隔开),
如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素(样式名称不区分先后顺序)
2)说明:a. 返回值是一个nodeList集合(区别于Array)
b. 该方法只能选取调用该方法的元素的后代元素。
3)兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法
5、通过CSS选择器选取元素
1)使用方法:document.querySelectorAll("selector")
其中,selector为合法的CSS选择器
2)说明:a. 返回值是一个nodeList集合(区别于Array)
3)兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法
JS1 js获取dom元素方法的更多相关文章
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取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; //获 ...
- [原]js获取dom元素的实际位置及相对坐标
关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/ ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
随机推荐
- html表格cell合并插件
数据展示时需要合并部分数据自己写了一个简单插件 合并前: 合并后: 调用示例: var trs = $('table#dataList tbody tr').not('#demo').get(); v ...
- Codevs_1048_石子归并_(动态规划)
描述 http://codevs.cn/problem/1048/ 1048 石子归并 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Des ...
- 《华油能源OA系统数据同步和扩展的设计与实现_张宇峰》阅读笔记
为什么我会找到这篇论文? 华油能源集团拥有多套信息化软件系统,每个用户需要登录操作多个软件系统,记住多个系统的用户名.密码,需要不停的切换到每个系统,查看是否有需要进行的工作:管理员更是疲于每天对各个 ...
- CentOS升级Python的方法
centOS内核版本为:3.10.101-1.el6.elrepo.x86_64 1,下载Python安装包 wget http://www.python.org/ftp/python/2.7.6/P ...
- linux下出现+ ls --color=auto -l --color=auto...++ echo -ne '\033]0;root@imon-2:~'等
[root@imon-2 ~]# cd /root/ + cd /root/ ++ echo -ne '\033]0;root@imon-2:~' [root@imon-2 ~]# ll + ls - ...
- SQL SERVER 的 INFORMATION_SCHEMA 的使用
------------------------------------------------------- 第一个查询看看库里有多少个表,表名等 select * from INFORMATION ...
- MFC中添加OpenGL
WINDOWS下展示OpenGL有多种形式: MFC 或 win32,该如何向MFC中添加OpenGL?下面是介绍最简单OpenGL框架. 1.首先通过VS建立MFC应用程序-MyOpenGL,选择单 ...
- HUD 2089
不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 天涯html&css基础框架
html申明 对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位. ...
- HDU 2102 A计划(三维BFS)
这题太欢乐了......虽然wa了几次,但是想到骑士在两幅图的传送门中传来传去就觉得这骑士太坑了 #include <cstdio> #include <iostream> # ...