框架设计续集（四）
对于上述的获取元素的方法，其中有缺陷，在于获取元素都是对整个document进行遍历，在性能方面可以优化
给以前的获取元素都加上第三个参数，上下文（context），意思是在指定的区域查找元素
//---------------------------------
/**
* 假如context是一个dom对象
*/
//假设context是一个dom对象
//对浏览器能力检测
var support ={};
support.getElementsByClassName = (function(){
var isExist = !!document.getElementsByClassName;
console.log(document.getElementsByClassName);
if(isExist && typeof document.getElementsByClassName == "function" ){
var oDivParent = document.createElement("div"),
oDivChild = document.createElement("div");
oDivChild.className = "cc";
oDivParent.appendChild(oDivChild);
return oDivParent.getElementsByClassName("cc")[0] ===oDivChild;
}
return false
})();
//遍历for(){}
function each(arr,fn){
for(var i=0;i<arr.length;i++){
if(fn.call(arr[i],i,arr[i])===false){
break
}
}
}
//单个的获取元素的方法
function getTag(tag,context,results){
results = results || [];
context = context ||document;
results.push.apply(results,context.getElementsByTagName(tag));
return results
}
function getID(id,results){
results = results || [];
results.push(document.getElementById(id));
return results
}
function getClass(classname,context,results){
results = results || [];
context = context ||document;
var arr, i,reg;
if(support.getElementsByClassName){
results.push.apply(results,document.getElementsByClassName(classname));
}else{
arr = context.getElementsByTagName("*");
for( i= 0;i<arr.length;i++){
reg = new RegExp("\\b"+classname+"\\b");
if(reg.test(arr[i].className)){
results.push(arr[i])
}
}
}
//console.log(results)
return results
}
//对所有的元素的获取
function getElem(selector,context,results){
results = results || [];
context = context ||document;
var regE = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
ex = regE.exec(selector);
if(ex){
if(ex[1]){
getID(ex[1],results);
}else if(ex[2]){
getClass(ex[2],context,results);
}else if(ex[3]){
getTag(ex[3],context,results)
}else if(ex[4]){
getTag("*",context,results)
}
}
return results;
}
<div id="con">
<div class="box box1">123</div>
<p class="box box1">pppppppppppppppp</p>
<h4>我是大标题</h4>
</div>
<body>
<script src="js/common1.0.js"></script>
<script>
//对于先前的获取元素的方法都是在document下进行的，性能可以优化
//假定上下文是一个dom元素
var list = getElem(".box",getElem("#con"));
console.log(list);
each(list,function(i,v){
this.style.background = "pink";
})
</script>
//结果(#con下的.box)背景色变粉红
/*
*假如上下文是一个dom对象伪数组
*需要修改的地方就是在调用获取元素函数传的上下文之前进行遍历，选择了在对总的函数进行修改，
*/
//对所有的元素的获取
function getElem(selector,context,results){
results = results || [];
context = context ||document;
var regE = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
ex = regE.exec(selector);
if(ex){
//下边的判断是为了加入上下文不传参，代表document，此时下边的遍历在运行时会报错
if(context.nodeType){
context = [context]
}
each(context,function(i,v){
if(ex[1]){
getID(ex[1],results);
}else if(ex[2]){
getClass(ex[2],v,results);
}else if(ex[3]){
getTag(ex[3],v,results)
}else if(ex[4]){
getTag("*",v,results)
}
})
}
return results;
}
//-------------------------------
eg：
<div class="con" id="con">
<div class="box box1">123</div>
<p class="box box1">pppppppppppppppp</p>
<h4>我是大标题</h4>
</div>
<div class="con">
<p class="box box1">我是第二个p标签</p>
<h4 class="box">我是大标题</h4>
</div>
<body>
<script src="js/common1.1.js"></script>
<script>
//对于先前的获取元素的方法都是在document下进行的，性能可以优化
//假定上下文是一个dom元素伪数组
each(getElem(".box",getElem(".con")),function(i,v){
this.style.background = "pink";
})
</script>
/*
加入context传进来的是一个选择器字符串（这个才是真正的实用的）
*/
//对所有的元素的获取
function getElem(selector,context,results){
results = results || [];
context = context ||document;
var regE = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
ex = regE.exec(selector);
if(ex){
//在context不传参数时，对document的情况进行转化，
if(context.nodeType){
context = [context]
}
if(typeof context == "string"){
//将选择器字符串转化为dom数组,加上if判断判断的目的是下边函数递归，需要跳出
context = getElem(context);
}
each(context,function(i,v){
if(ex[1]){
getID(ex[1],results);
}else if(ex[2]){
getClass(ex[2],v,results);
}else if(ex[3]){
getTag(ex[3],v,results)
}else if(ex[4]){
getTag("*",v,results)
}
})
}
return results;
}
eg：
<div class="con" id="con">
<div class="box box1">123</div>
<p class="box box1">pppppppppppppppp</p>
<h4>我是大标题</h4>
</div>
<div class="con">
<p class="box box1">我是第二个p标签</p>
<h4 class="box">我是大标题</h4>
</div>
<body>
<script src="js/common1.2.js"></script>
<script>
//对于先前的获取元素的方法都是在document下进行的，性能可以优化
//假定上下文是一个dom元素伪数组
each(getElem(".box",".con"),function(i,v){
this.style.background = "pink";
})
each(getElem(".box1"),function(i,v){
this.style.fontSize= "25px";
this.style.color = "white"
})
</script>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.11.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
