博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript:JavaScript中常见获取对象元素的方法
阅读量:6171 次
发布时间:2019-06-21

本文共 1576 字,大约阅读时间需要 5 分钟。

介绍:

  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://aptba.baihongyu.com/

你可能感兴趣的文章
宇宙风暴?才怪!瑞典暗指俄罗斯黑客攻击航空控制系统
查看>>
系统进程管理工具Process Explorer
查看>>
富士通仍执着SPARC架构芯片 将坚持推新
查看>>
易宪容:企业要利用大数据挖掘潜在需求
查看>>
微软声称Win10周年更新为Edge浏览器带来更好电池寿命
查看>>
混合云是企业IT的未来吗?
查看>>
LINE在日本取得成功 但全球化之路还很长
查看>>
红帽云套件新增QuickStart Cloud Installer,加快私有云部署
查看>>
MapXtreme 2005 学习心得 一些问题(八)
查看>>
流量精细化运营时代,营销SaaS之使命——流量掘金
查看>>
雅虎同意出售核心资产
查看>>
Win10大丰收的节奏 微软收编iOS全部150万应用
查看>>
智慧城市要除“城市病” 中兴通讯开辟新增长极
查看>>
Opera已确认解散iOS开发团队
查看>>
DevOps:新的业务浪潮
查看>>
CERT:启用EMET的Windows 7比Windows 10更加安全
查看>>
LINE上市:一场迟到、勇敢又无奈的IPO
查看>>
OA选型:OA系统工作流是核心
查看>>
如何发现“利用DNS放大攻击”的服务器
查看>>
《Arduino开发实战指南:LabVIEW卷》——第2章 Arduino软件
查看>>