JavaScript實作自己的DOM選擇器原理及程式碼_javascript技巧

(function (ns) {
/*
//tagName
console.log(dom.get("p"));
//#id
console.log(dom.get("#div"))
//.class
console.log(dom.get(".span", document.body));
//標籤. 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 {
//呼叫自訂選擇器
returnterpret( query, context) ;
}
}
//解釋執行dom選擇子
functionterpret(query, context){
var parts = query.replace(/s /, " " ).split(" ");
var 部分= parts.pop();
var 選擇器= Factory.create(part);
var ret = 選擇器.find(context); (parts[0] && ret [0]) ? filter(parts, ret) : ret
}
//ID選擇器
function IDSelector(id) {
this.id = id; .substring(1);
}
IDSelector.prototype = {
找出：函數（上下文）{
return document.getElementById(this.id);
},
match: function(element){
return element.id == this.id;
}
};
IDSelector.test = 函數（選取器）{
var regex = /^#([w-_] ) /;
返回regex.test(選擇器);
};
//元素選擇器
function TagSelector(tagName) {
this.tagName = tagName.toUpperCase();
}
TagSelector.prototype = {
find: function (context) {
return context.getElementsByTagName(this.tagName);
},
匹配：函數(元素){
傳回this.tagName == element.tagName.toUpperCase() || this.tagName === "*";
}
};
TagSelector.test = 函數（選擇器）{
var regex = /^([w*-_] )/;
返回regex.test(選擇器);
};
//類別選擇器
function ClassSelector(className) {
var splits = className.split('.');
this.tagName = splits[0] ||不明確的;
this.className = splits[1];
}
ClassSelector.prototype = {
find: function (context) {
var elements;
var ret = [];
var tagName = this.tagName;
var className = this. className;
var 選擇器= new TagSelector((tagName || "*"));
//支援原生getElementsByClassName
if (context.getElementsByClassName) {
elements = context.getElementsByClassName(className );
if(!tagName){
回傳元素;
}
for(var i=0,n=elements.length; iif(選擇器.match(elements[i]) ){
ret.push(元素[i]);
}
}
} else {
elements = 選擇器.find(context) ;
for(var i=0, n=elements.length; iif( this.match(elements[i]) ) {
ret.push(elements[i ] );
}
}
}
回傳ret;
},
配對：函數（元素）{
var className = this.className;
var regex = new RegExp("^|\s" className "$|\s");
傳回regex.test(element.className);
}
};
ClassSelector.test = 函數（選擇器）{
var regex = /^([w-_] )?.([w-_] )/;
返回regex.test(選擇器);
};
//TODO: 屬性選擇器
function AttributeSelector(attr){
this.find = function(context){
};
this.match = function(element){
};
this.match = function(element){
} ;
}
AttributeSelector.test = 函數（選擇器）{
var regex = /[([w-_] )(?:=([w-_] ))?]/;
回傳regex.test(選擇器);
};
//依父級元素過濾
function filter(parts, nodeList){
var part = parts.pop();
var 選擇器= Factory.create(part);
var ret = [];
var 父級；
for(var i=0, n=nodeList.length; iparent = nodeList[i].parentNode;
while(parent &&parent !== doc){
if(selector.match(parent)){
ret.push(nodeList[iector.match(parent)){
ret.push(nodeList[iector.match(parent)){
ret.push(nodeList[iector.match(parent)){
ret.push(nodeList[iector。match(parent) ]);
休息；
}
parent =parent.parentNode;
}
}
返回零件[0] && ret[0] ?過濾器（零件，ret） ：ret；
}
//根據查詢選擇子建立對應選擇器物件
var Factory = {
create: function (query) {
if (IDSelector.test(query)) {
回傳新的IDSelector(查詢);
} else if (ClassSelector.test(query)) {
return new ClassSelector(query);
} else {
傳回新的TagSelector (query);
}
}
};