原生JS查找元素
2024-10-09 15:15:35
今天写了一个很简单、很粗暴的通过JS根据类来查找DOM元素。
为了降低它的粗暴等级(耗费性能)我给了三个等级。
首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API。
其次是指定ID
最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围!
因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教。。。
下面贴代码:
function $(d,t){ var c = null, // className
e = null, // element
i = null; // id function type(p){
/function.(\w*)\(\)/.test(p.constructor);
return RegExp.$1.toLowerCase();
} if(type(d) == 'string'){ if(/^\.[a-z,A-Z,_]\w*$/.test(d)){ // 匹配class
c = d;
}else if(/^#[a-z,A-Z,_]\w*$/.test(d)){ // 匹配id
i = d;
}else if(/^[a-z,A-Z,_]+$/.test(d)){ // 匹配元素
e = d;
}else{
return undefined;
}
if(document.querySelectorAll){ if(c || e) return document.querySelectorAll(c || e);
if(i) return document.querySelectorAll(i)[0]; }else{
if(c){
var all = document.getElementsByTagName(t || '*'),
cn = c.slice(1,c.length),
reg = new RegExp('^'+cn+'\\b'), // 限定类名的起始,结束只要是相同字符结束即可。
em = [];
for(var i=0;i<all.length;i++){
if(reg.test(all[i].className)){
em.push(all[i])
}
}
return em;
}else if(e){
return document.getElementsByTagName(e);
}else if(i){
return document.getElementById(i);
}
} }else{
return undefined;
} }
调用方式:
$('selector'[,type])
最新文章
- GJM : Unity调用系统窗口选择本地文件
- NSString,NSArray,NSNumber等类的继承问题
- javascript性能优化总结二(转载)
- Java的位运算 待整理
- andorid 开发笔记 -- 问题与解决
- Microsoft Certification List
- jQuery 快速结束当前动画
- Windsock套接字I/O模型学习 --- 第一章
- C语言程序设计第六次作业--循环结构(2)
- Windows环境下安装配置Mosquitto服务及入门操作介绍
- 与图论的邂逅04:LCT
- Dubbo新版管控台
- 蓝桥杯 基础训练 2n皇后
- Unity -----一些可能存在的错误
- UI5-文档-4.1-Hello World!
- db2 托管事务未设置方法有问题
- 1245 最小的N个和
- 使用新浪API生成短连接
- java基础知识(7)---多态
- codeforces 664A A. Complicated GCD(水题)
热门文章
- 【腾许Bugly干货分享】“HTTPS”安全在哪里?
- Entity Framework 5.0系列之自动生成Code First代码
- [.net 面向对象编程基础] (4) 基础中的基础——数据类型转换
- 【译】什么导致了Context泄露:Handler&;内部类
- [ZigBee] 15、Zigbee协议栈应用(一)——Zigbee协议栈介绍及简单例子(长文,OSAL及Zigbee入门知识)
- 302 Moved Temporarily
- jq源码立即执行函数的undefined参数
- 大叔也说Xamarin~Android篇~Activity之间传递数组
- MVVM架构~Knockoutjs系列之js接收C#数据集合的方式
- js实现『加载更多』功能实例