原生JS查找元素
今天写了一个很简单、很粗暴的通过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])
原生JS查找元素的更多相关文章
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- JavaScript DOM查询,原生js实现元素子节点的获取
在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...
- 原生js删除元素
//删除id var idObject = document.getElementById('sidebar'); if (idObject != null) idObject.parentNode. ...
- 原生JS给元素添加class属性
有下面这三种简单语句. document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document ...
随机推荐
- Lock-Free 编程
文章索引 Lock-Free 编程是什么? Lock-Free 编程技术 读改写原子操作(Atomic Read-Modify-Write Operations) Compare-And-Swap 循 ...
- [异常解决] vmware tools 虚拟机 --> 更新/导入wmwera tools菜单变灰,无法导入问题解决
在虚拟中的装Ubuntu只要下载一个Ubuntu镜像,按照新建的指示一步一步安装 ,但是安装好之后想从原来系统中复制点东西到虚拟机中的Ubuntu中却有点麻烦.幸好Vmware自带了一个VMware ...
- 爱上MVC系列~前端验证与后端数据有效性验证
回到目录 有一句话,在10年前就是真理,到现在也一直都是,“前端验证可以没有,但后端验证必须要有”,这句话相信大家都没有意见吧,前端验证一般指通过JS方式实现的,友好的,个性的验证方式,而后端验证是指 ...
- struts2学习笔记之九:struts2的命名空间
struts2的命名空间适用于多人开发,根据不同模块命名不同的命名空间,方便开发和管理 struts2如果没有配置命名空间,默认命名空间为"/",Struts2中Action的完整 ...
- 转 jsp中 session的简单用法
Session对象:是用来分别保存每一个用户信息的对象,以便于跟踪用户的操作状态.Session的信息保存在服务端,Session的ID保存在客户机的Cookie中.事实上,在许多服务器上,如果浏览器 ...
- [Java面试七]Mybatis总结以及在面试中的一些问题.
1.JDBC编程有哪些不足之处,MyBatis是如何解决这些问题的? ① 数据库链接创建.释放频繁造成系统资源浪费从而影响系统性能,如果使用数据库链接池可解决此问题. 解决:在SqlMapConfig ...
- ASP.net的指令
3.2 ASP.NET指令 在基于面向对象思想的.NET平台,可以称之为“万物皆对象”了.在这里,一个页面,一个用户控件,一个母版页等,全都是对象,全都有各自的属性. 在类文件里,我们表示类的属性可以 ...
- Atitit usrQBM2331 参数格式化规范
Atitit usrQBM2331 参数格式化规范 String sql = "insert agent(uid,parent_id,pwd,name,tel,wechat,bkkad,si ...
- C#并行编程-相关概念
菜鸟初步学习,不对的地方请大神指教,参考<C#并行编程高级教程.pdf> 目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 C# ...
- 批处理集锦——(5)使用dir查找文件
eg dir /a-d /s /b *.bat -d表示不显示.bat结尾的文件夹