JavaScript:JavaScript中常见获取对象元素的方法
介绍:
javascript中常见的3种获取元素的方法,分别是通过元素ID、通过标签名字和通过类名字来获取
操作如下:
1、getElementById
DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。
它是document对象特有的函数,只能通过其来调用该方法。其使用的方法如下:
document.getElementById('demo') //demo是元素对应的ID
该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。
2、getElementsByTagName
该方法返回一个对象数组(准确的说是HTMLCollection集合,它不是真正意义上的数组),每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,同样,该方法只提供一个参数,它的参数是指定标签的名字,示例代码如下:
document.getElementsByTagname('li') //li是标签的名字
需要注意的是,该方法除了能被document对象调用之外,还可以被普通的元素调用。示例如下:
var demo = document.getElementById('demo'); var lis = demo.getElementsByTagname('li');
同样,该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。
3、getElementsByClassName
除了通过指定标签获取元素外,DOM还提供了getElementsByClassName方法来获取指定class名的元素。不过由于该方法比较新,较老的浏览器还不支持,比如IE6。不过我们可以通过hack方式来弥补老浏览器缺陷。该方法调用的方式如下所示:
document.getElementsByClassName('demo') //demo为元素指定的class名
和getElementsByTagname一样, 该方法除了能被document对象调用之外,还可以被普通的元素调用。
对于比较老的浏览器,比如IE6、7我们可以通过下面的hack方式来实现:
function getElementsByClassName(node,classname){if(node.getElementsByClassName) {return node.getElementsByClassName(classname);}else {var results = [];var elems = node.getElementsByTagName("*");for(var i = 0; i < elems.length; i++){if(elems[i].className.indexOf(classname) != -1){results[results.length] = elems[i];}}return results;}}
拓展
如果你不仅仅满足上面那些元素选择的方法,想和JQuery一样,能通过选择器来获取元素,实现的方法和上面的 getElementsByClassName差不多,如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡,已经够用了,毕竟 这三种性能上算是优秀的。
Original linker:http://www.jb51.net/article/61737.htm
转载于:https://www.cnblogs.com/XYQ-208910/p/5824994.html
JavaScript:JavaScript中常见获取对象元素的方法相关推荐
- JavaScript 面试中常见算法问题详解
JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...
- js怎么获取一个元素与屏幕右边的距离_js中如何获取某个元素到浏览器最左和最右的距离...
js中如何获取某个元素到浏览器最左和最右的距离以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! js中获取某个元素到浏览器 ...
- vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了 但有一个问题我很纳闷 就是你说下vue中获取dom元素的方法吧 我说大体上俩中吧 1.vue中 ref的方法 给元素起一个ref名称 通过 th ...
- 获取dom元素的方法
在 JavaScript 中,获取 DOM 元素的方式有多种.下面列出了一些常用的方法: 1.用 document.getElementById() 方法:该方法需要传入一个参数,即要获取元素的 id ...
- JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- python统计列表中元素个数_python中计算一个列表中连续相同的元素个数方法
python中计算一个列表中连续相同的元素个数方法 最简单的例子: a = [1,1,1,1,2,2,2,3,3,1,1,1,3] # 问:计算a中最多有几个连续的1 很明显,答案是4 如果用代码实现 ...
- 关于日常业务中常见公共字段的处理方法
关于日常业务中常见公共字段的处理方法 1 概述操作 2 测试 在日常的业务处理中, 新增或修改等常见业务, 经常对一些与业务无关的常用字段需要进行赋值和更新,为了更好的方便的进行代码开发, 可以采用切 ...
- 获取矩阵元素的方法 4种方法 B(1,2) B(9) B(sub2ind(size(B),3,4))
立即学习:https://edu.csdn.net/course/play/24708/278802?utm_source=blogtoedu 获取矩阵元素的方法 4种方法 1 使用编号索引(指定元素 ...
- 机器学习中常见的过拟合解决方法
机器学习中常见的过拟合解决方法 参考文章: (1)机器学习中常见的过拟合解决方法 (2)https://www.cnblogs.com/jiangxinyang/p/9281107.html 备忘一下 ...
最新文章
- ERPLAB中文教程:创建与查看EventList
- 移动平台MOBA发热与帧率优化
- java中常用的并发工具类
- UART_RECV详细设计方案
- Android网络请求开源框架retrofit的基本GET用法(2.4版本)
- leetcode 77. 组合 思考分析
- shellcode xor编码/解码[2]
- python第三方库文件传输助手_Python中的第三方模块(itchat)
- pytorch torchvision.transform.Compose
- 点云合并pcl重载“+”
- 小米路由器挂php,小米路由器mini 安装openWrt+更新源+挂载U盘+安装python
- 系统分析和设计方法之数据建模和分析
- 电路基本原理的那些事儿之 分压原理
- Matlab中的对数使用
- 独立开发一款简单的安卓app
- CATIA飞机协同设计制造图形工作站配置方案
- js 打开视频文件,测试已通过
- 【pyplot】scatter根据点的label或位置设置不同颜色
- Android 12 WiFi 架构
- 集合框架的理解与总结