在前边的学习框架中,我们介绍了封装选择器,但是,实现的效果并不完美,所以后续我们将会对他做出改善。
那么接下来,我们进行进一步的改善,查找指定元素下的选择器。
这时候我们首先要考虑的是,每一个封装的选择器,getId,getTags,getClasses方法中添加指定元素,也就是给每一个封装的方法添加一个参数,我们暂且定义为parent,我们就需要对这个参数做出先关的处理,首先我们展示封装的getId代码:
//封装id的方法 function getId(idName,parent){ var result=[]; var id=document.getElementById(idName); if (id!=null){ if (!parent){ result.push(id); }else{//如果有parent参数 //找到他的父元素 var parentNode=id.parentNode; //循环判断 while(parentNode!=null){ if (parentNode==parent){ result.push(id); break; }else{ parentNode=parentNode.parentNode; } } } } return result; };//封装 id结束
我们可以看出,添加了parent参数后,我们判断了得到的id是否是null,并且判断了参数是否是parent,当然如果parent参数不存在的话,我们就可以直接将得到的id采用push()方法推进数组,否则,如果parent存在的事话,这是我们就需要判断,id的父节点是否和我们指定的parent相等,如果不想等的话,我们就继续找id的父节点的父节点,如此循环下去,我们可以使用while循环给出条件,只要父节点不是null,我们就向id上一级寻找,下面是while循环代码偏断:
//循环判断 while(parentNode!=null){ if (parentNode==parent){ result.push(id); break; }else{ parentNode=parentNode.parentNode; }
下面我们展示getTags的代码参考:
//封装标签方法 function getTags(tagName,parent){ var result=[]; parent=parent || document; result.push.apply(result,parent.getElementsByTagName(tagName)); return result; };//封装标签结束看的出来,封装的标签比较简单,我们首先也是对参数parent做出了处理,使用短路运算,如果parent为真,我们返回parent,如果parent为假,我们返回document:
parent=parent || document;之后我们依旧使用apply方法,将得到的数组添加result中,apply()方法不理解的同学,可以参考之前发表的 "javascript框架思想",这里不再做出讲解。