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文件的小脚本
Jun 28 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 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
php获取后台Job管理的实现代码
2011/06/10 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
常用python编程模板汇总
2016/02/12 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
keras 多任务多loss实例
2020/06/22 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
法人授权委托书公证范本
2014/09/14 职场文书
文员岗位职责
2015/02/04 职场文书
项目安全员岗位职责
2015/02/15 职场文书
城南旧事读书笔记
2015/06/29 职场文书