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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node.js 和 HTML5-Canvas 结合实现截图上传交互

楼主要做一个简单的图片上传服务器&#xff0c; node.js实现服务端&#xff0c; 页面使用HTML5-Canvas实现截图。 为什么用Nodejs呢&#xff0c;因为用Js写后台很爽-。- 而且比较简单 为什么用canvas呢&#xff0c;其实我不想用的 因为有些低版本的IE对HTML5的支持不好&#xf…

Altium Designer原理图库引脚名字添加上划线

双击引脚在输入名字的时候每一个字母后面加上反斜杠 \ 就可以了。 Exp: R\S\T\

得到classpath和当前类的绝对路径的一些方法

From&#xff1a; http://my.oschina.net/u/1583086/blog/521259 下面是一些得到classpath和当前类的绝对路径的一些方法。 1.this.getClass().getResource&#xff08;""&#xff09; 得到的是当前类class文件的URI目录。如&#xff1a;file&#xff1a;/D&#…

通过文件url地址获取base64;通过图片url地址获取base64;js获取文件的base64

本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇 以下代码可直接复制使用&#xff01;注意第9行的图片地址更改下 <template><div class"content"><div>获取图片的base64</div><input type"file" …

使用CrpytAPI编码和解码PKCS#7消息

为了在不同体系结构的网络和计算机之间交互加密消息&#xff0c;加密通信各方需要对传送的消息使用标准的方式进行编码。CryptAPI支持PKCS #7标准加密消息语法格式消息。PKCS #7标准采用了CCITT X.208定义的ASN.1 BER编码规则&#xff0c;定义了加密消息相关的类型和编码方式。…

J2EE开发之常用开源框架介绍

From: http://blog.csdn.net/kuyuyingzi/article/details/38351231 主要就我所了解的J2EE开发的框架或开源项目做个介绍&#xff0c;可以根据需求选用适当的开源组件进行开发。主要还是以Spring为核心&#xff0c;也总结了一些以前web开发常用的开源工具和开源类库 1持久层&am…

modprobe: FATAL: Module xxx.ko not found in directory /lib/modules/$(uname -r)

如果遇到此错误&#xff0c;首先要检查要加载的驱动是否已经存在与系统默认驱动路径 /lib/modules/$(uname -r) 下面&#xff0c;确认拷贝完成后&#xff0c;需要在加载模块之前建立该模块的依赖关系。也即必须用 depmod 来更新一下 /lib/modules/$(uname -r)/modules.dep 文件…

Android 短信解析

URI主要有&#xff1a; content://sms/ 所有短信 content://sms/inbox 收件箱 content://sms/sent 已发送 content://sms/draft 草稿 content://sms/outbox 发件箱 content://sms/failed 发送失败 content://sms/queued 待…

ASP.Net网站部署失败

部署站点时候&#xff0c;出现如下错误 “/”应用程序中的服务器错误。 --------------------------------------------------------------------------------当前标识(NT AUTHORITY\SYSTEM)没有对“C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files”的…

Linux系统开机自动加载驱动module

Linux系统的驱动默认存放目录为&#xff1a; /lib/modules/$(uname -r)/kernel/drivers&#xff0c;因此如果希望系统可以启动时自动加载驱动必须首先把驱动放到该目录下面&#xff0c;执行完此步操作以后&#xff0c;再执行 depmod 命令更新驱动依赖关系文件 modules.dep&…

FineReport报表和J2EE应用的集成

From: http://www.blogjava.net/fannie/archive/2013/05/08/398985.html FineReport是一个纯Java软件&#xff0c;因此对于J2EE的项目&#xff0c;可以做到无缝集成。 报表服务器并非物理概念的服务器&#xff0c;而是以一个标准的J2EE应用的形式或者jar包的形式提交给程序。应…

vue使用jszip和file-save下载文件并打包;vue前端下载多个文件b并打包;

场景&#xff1a; 一般是后端直接将多个文件打包好&#xff0c;前端调用下载地址下载打包&#xff1b;但是文件太多会导致下载接口时间过长和服务器爆掉&#xff1b;故采用前端先将多个文件下载然后进行打包&#xff1b; 注意点&#xff1a; 1.先获取所有下载的文件路径和包含后…

【BZOJ1085】骑士精神

迭代加深搜索。 剪枝&#xff1a;当满足以下任意一个条件退出&#xff1a; 1.当前已搜到答案时&#xff08;ans!-1||sum0&#xff09; 2.剩余步数1<当前局面与目标局面不同的格子数sum 时&#xff08;因为n步最多改变n1个格子&#xff09; 3.当前步数>当前规定最大步数时…

CH340电路设计注意事项

在前面两篇博客提到了CH340的电路设计以及芯片选型&#xff0c;本文将重点放在使用CH340芯片进行电路设计的一些细节与注意事项。 电压匹配问题 CH340 芯片通过 USB 转换出来的 TTL 串口输出和输入电压是根据芯片供电电压是自适应的。也即&#xff0c;如果芯片是 5V 供电&…

解决 Visual Studio 中代码注释自动折叠的问题

今天突发奇想&#xff0c;打算把存储过程以注释的形式放在代码中进行版本管理&#xff0c;比如下面的代码&#xff1a; 由于存储过程很长&#xff0c;注释占了很多行&#xff0c;严复影响了正常代码的排版与阅读体验。之前也遇到过这样的场景&#xff0c;当时通过手动添加regio…

Newtonsoft.Json高级用法

From: http://www.cnblogs.com/yanweidie/p/4605212.html 手机端应用讲究速度快&#xff0c;体验好。刚好手头上的一个项目服务端接口有性能问题&#xff0c;需要进行优化。在接口多次修改中&#xff0c;实体添加了很多字段用于中间计算或者存储&#xff0c;然后最终用Newtonso…

CH340驱动(含各平台)

CH340转串口芯片支持的平台驱动齐全&#xff0c;支持 Windows/Linux/Android/MacOS/WinCE 等各主流系统。下面就给出各平台下驱动官网链接和简要说明&#xff0c;每个平台的安装与使用问题可以参见我的其他博文。 Windows驱动 下载链接&#xff1a;CH340/CH341 Windows 驱动链…

js获取文件名后缀

this.fileType this.file.name.split(.)[this.file.name.split(.).length - 1]

PHP笔记-管道的作用 类

echo 123 | sudo -S /bin/bash -c cp god* /usr/local/bin | 就是管道 作用是将前面的结果作为后面的参数使用 123就是sudo的密码 -c &#xff08;command命令&#xff09; cp god* /usr/local/bin将以god开头的文件拷贝到/usr/local/bin文件中 god* 以god开头的文件 /bin/b…

Android 经典示例,初学者的绝好源码资料

2019独角兽企业重金招聘Python工程师标准>>> Android 经典示例&#xff0c;初学者的绝好源码资料 附上源码&#xff1a; 转载:http://www.adobex.com/android/source/details/00000374.htm 转载于:https://my.oschina.net/androidcode/blog/104696