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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
详解JavaScript函数
Dec 01 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
深入理解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 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
浅析php原型模式
2014/11/25 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
深入浅出分析Python装饰器用法
2017/07/28 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
介绍一下常见的木马种类
2014/11/15 面试题
青蓝工程实施方案
2014/03/27 职场文书
抽奖活动主持词
2014/03/31 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
环保倡议书范文
2014/05/12 职场文书
家长给学校的建议书
2014/05/15 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL