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 相关文章推荐
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
jquery队列函数用法实例
Dec 16 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
JSONP基础知识详解
Mar 19 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
2009/06/29 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript基础语法学习笔记
2016/01/04 Javascript
用原生js做单页应用
2017/01/17 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
详解Python Socket网络编程
2016/01/05 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
应聘自荐书
2013/10/08 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
动员大会主持词
2014/03/20 职场文书
妇女工作先进事迹
2014/08/17 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
惊天动地观后感
2015/06/10 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers