JavaScript实现自己的DOM选择器原理及代码


Posted in Javascript onMarch 04, 2013

解释器模式(Interpreter):定义一种语法格式,通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。

开放封闭原则:面向对象中的开放封闭原则是类或模块应该对扩展开放对修改封闭,在这个dom选择器中实现id选择器,元素选择器,类选择器,如果以后需要属性选择器的话定义一个属性选择器实现相应的方法,同时在简单工厂中增加相应的创建属性选择器对象分支即可。

匹配原理:浏览器在匹配CSS选择符时是按照从右到左匹配的,所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。

代码:

(function (ns) { 
/* 
//tagName 
console.log(dom.get("p")); 
//#id 
console.log(dom.get("#div")); 
//.class 
console.log(dom.get(".span", document.body)); 
//tag.class 
console.log(dom.get("div.span")); 
//#id .class 
console.log(dom.get("#div .span")); 
//.class .class 
console.log(dom.get(".ul .li-test")); 
*/ 
var doc = document; 
var simple = /^(?:#|\.)?([\w-_]+)/; 
function api(query, context) { 
context = context || doc; 
//调用原生选择器 
if(!simple.test(query) && context.querySelectorAll){ 
return context.querySelectorAll(query); 
}else { 
//调用自定义选择器 
return interpret(query, context); 
} 
} 
//解释执行dom选择符 
function interpret(query, context){ 
var parts = query.replace(/\s+/, " ").split(" "); 
var part = parts.pop(); 
var selector = Factory.create(part); 
var ret = selector.find(context); 
return (parts[0] && ret[0]) ? filter(parts, ret) : ret; 
} 
//ID选择器 
function IDSelector(id) { 
this.id = id.substring(1); 
} 
IDSelector.prototype = { 
find: function (context) { 
return document.getElementById(this.id); 
}, 
match: function(element){ 
return element.id == this.id; 
} 
}; 
IDSelector.test = function (selector) { 
var regex = /^#([\w\-_]+)/; 
return regex.test(selector); 
}; 
//元素选择器 
function TagSelector(tagName) { 
this.tagName = tagName.toUpperCase(); 
} 
TagSelector.prototype = { 
find: function (context) { 
return context.getElementsByTagName(this.tagName); 
}, 
match: function(element){ 
return this.tagName == element.tagName.toUpperCase() || this.tagName === "*"; 
} 
}; 
TagSelector.test = function (selector) { 
var regex = /^([\w\*\-_]+)/; 
return regex.test(selector); 
}; 
//类选择器 
function ClassSelector(className) { 
var splits = className.split('.'); 
this.tagName = splits[0] || undefined ; 
this.className = splits[1]; 
} 
ClassSelector.prototype = { 
find: function (context) { 
var elements; 
var ret = []; 
var tagName = this.tagName; 
var className = this.className; 
var selector = new TagSelector((tagName || "*")); 
//支持原生getElementsByClassName 
if (context.getElementsByClassName) { 
elements = context.getElementsByClassName(className); 
if(!tagName){ 
return elements; 
} 
for(var i=0,n=elements.length; i<n; i++){ 
if( selector.match(elements[i]) ){ 
ret.push(elements[i]); 
} 
} 
} else { 
elements = selector.find(context); 
for(var i=0, n=elements.length; i<n; i++){ 
if( this.match(elements[i]) ) { 
ret.push(elements[i]); 
} 
} 
} 
return ret; 
}, 
match: function(element){ 
var className = this.className; 
var regex = new RegExp("^|\\s" + className + "$|\\s"); 
return regex.test(element.className); 
} 
}; 
ClassSelector.test = function (selector) { 
var regex = /^([\w\-_]+)?\.([\w\-_]+)/; 
return regex.test(selector); 
}; 
//TODO:属性选择器 
function AttributeSelector(attr){ 
this.find = function(context){ 
}; 
this.match = function(element){ 
}; 
} 
AttributeSelector.test = function (selector){ 
var regex = /\[([\w\-_]+)(?:=([\w\-_]+))?\]/; 
return regex.test(selector); 
}; 
//根据父级元素过滤 
function filter(parts, nodeList){ 
var part = parts.pop(); 
var selector = Factory.create(part); 
var ret = []; 
var parent; 
for(var i=0, n=nodeList.length; i<n; i++){ 
parent = nodeList[i].parentNode; 
while(parent && parent !== doc){ 
if(selector.match(parent)){ 
ret.push(nodeList[i]); 
break; 
} 
parent = parent.parentNode; 
} 
} 
return parts[0] && ret[0] ? filter(parts, ret) : ret; 
} 
//根据查询选择符创建相应选择器对象 
var Factory = { 
create: function (query) { 
if (IDSelector.test(query)) { 
return new IDSelector(query); 
} else if (ClassSelector.test(query)) { 
return new ClassSelector(query); 
} else { 
return new TagSelector(query); 
} 
} 
}; 
ns.dom || (ns.dom = {}); 
ns.dom.get = api; 
}(this));
Javascript 相关文章推荐
javascript面向对象编程代码
Dec 19 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
JS获取后台Cookies值的小例子
Mar 04 #Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 #Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 #Javascript
js给dropdownlist添加选项的小例子
Mar 04 #Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 #Javascript
利用js实现选项卡的特别效果的实例
Mar 03 #Javascript
You might like
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php目录操作实例代码
2014/02/21 PHP
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
python中实现定制类的特殊方法总结
2014/09/28 Python
Python中的rfind()方法使用详解
2015/05/19 Python
详解Python字符串对象的实现
2015/12/24 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
简单了解python列表和元组的区别
2020/05/14 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
初任培训自我鉴定
2013/10/07 职场文书
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
社区母亲节活动记录
2014/03/06 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
《春晓》教学反思
2014/04/20 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
交流会主持词
2015/07/02 职场文书
子女赡养老人协议书
2016/03/23 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python