JavaScript中常见获取元素的方法汇总


Posted in Javascript onMarch 04, 2015

常见的获取元素的方法有3种,分别是通过元素ID、通过标签名字和通过类名字来获取。

getElementById

DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。

它是document对象特有的函数,只能通过其来调用该方法。其使用的方法如下:

document.getElementById('demo') //demo是元素对应的ID

该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。

getElementsByTagName

该方法返回一个对象数组(准确的说是HTMLCollection集合,它不是真正意义上的数组),每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,同样,该方法只提供一个参数,它的参数是指定标签的名字,示例代码如下:

document.getElementsByTagname('li')  //li是标签的名字

需要注意的是,该方法除了能被document对象调用之外,还可以被普通的元素调用。示例如下:

var demo = document.getElementById('demo');

var lis = demo.getElementsByTagname('li');    

同样,该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用。

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差不多,如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡,已经够用了,毕竟这三种性能上算是优秀的。

以上就是本文的全部内容了,希望对大家能够有所帮助。

Javascript 相关文章推荐
JS异常处理的一个想法(sofish)
Mar 14 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 #Javascript
JavaScript设置获取和设置属性的方法
Mar 04 #Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 #Javascript
深入探讨javascript中的数据类型
Mar 04 #Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 #Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 #Javascript
jQuery中大家不太了解的几个方法
Mar 04 #Javascript
You might like
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
三个python爬虫项目实例代码
2019/12/28 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python3.9新特性详解
2020/10/10 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
宝信软件JAVA工程师面试经历
2012/08/19 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
五一服装活动方案
2014/01/11 职场文书
工作失职检讨书500字
2014/10/17 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
家属联谊会致辞
2015/07/31 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
MySQL 数据丢失排查案例
2021/05/08 MySQL
基于Python实现一个春节倒计时脚本
2022/01/22 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS