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检测客户端不是firefox则提示下载
Apr 07 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
javascript实现随机抽奖功能
Dec 30 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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python排序算法实例代码
2017/08/10 Python
对python字典过滤条件的实例详解
2019/01/22 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python实现处理mysql结果输出方式
2020/04/09 Python
python中wx模块的具体使用方法
2020/05/15 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python语言的优势是什么
2020/06/17 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
少儿节目主持串词
2014/04/02 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
地震慰问信
2015/02/14 职场文书
项目备案申请报告
2015/05/15 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书