js通过classname来获取元素的方法


Posted in Javascript onNovember 24, 2016

原生JS有3种方式来获取元素:

getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')
getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素

function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className==className){
ele[ele.length]=all[i];
 }
}
return ele;
}
console.log(getElementsByClassName("entry"));
console.log(getElementsByClassName("entry","div"));

实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的

tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等..

上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办?

明显通过className==是不行了

所以我们只要把上面两篇文章的hasclass函数搬过来就OK了,我们再次来改造下我们的getElementsByClassName函数

function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){
ele[ele.length]=all[i];
}
 }
return ele;
}

这样就能处理一个元素含有多个classname的情况了

以上就是小编为大家带来的js通过classname来获取元素的方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
静态页面的值传递(三部曲)
Sep 25 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 #Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 #Javascript
概述javascript在Google IE中的调试技巧
Nov 24 #Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 #Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 #Javascript
值得分享的Bootstrap Table使用教程
Nov 23 #Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 #Javascript
You might like
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
python 性能提升的几种方法
2016/07/15 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
模具专业自荐信
2014/05/29 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
孔繁森观后感
2015/06/10 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技