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

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【JavaScript实现自己的DOM选择器原理及代码】，下面是详细的讲解！

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

(function (ns) {

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实现自己的DOM选择器原理及代码的用户互动如下：

　　相关问题：html原生选择器的使用

　　答：HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。上述答案为： var test1 = document.querySelector("... >>详细

　　相关问题：JS/JAVASCRIPT问题：DOM如何选择CLASS？

　　答：开源框架一般都有选择器，可以类似CSS选择器一样选取DOM，如jQuery。其实CLASS也是便于CSS操作，而选择DOM最好的方法是用ID，这个效率最高。所以不是必要的情况下，不要用CLASS选择DOM。 >>详细

　　相关问题：javascript 计算器基本原理

　　答：如下代码仅仅实现了加、减、乘、除四个小功能。 window.onload=function (){ var oText1=document.getElementById('txt1'); var oText2=document.getElementById('txt2'); var oSel=document.getElementById('sel1'); var oBtn=document.getElem... >>详细