js dom元素选择器
2016-12-06 本文已影响0人
何必自找失落_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的选择器集合</title>
</head>
<body>
<div class="class reg">
<div id="div" class="class">
<div>
<a class="class" href="#"></a>
<div id="wo">dada</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function (){
var get = {
"getclass" : function (className,parent){
var eles = this.gettag("*",parent);
var reg = new RegExp("(^|\\s)"+className+"(\\s|$)");
var arr = [];
for( var i = 0 , len = eles.length ; i < len ; i ++ ){
if (reg.test(eles[i].className)) {
arr.push(eles[i]);
}
}
return arr;
},
"gettag" : function (tag,parent){
return ( parent || document).getElementsByTagName(tag);
},
"getid" : function (id,parent){
return ( parent || document).getElementById(id);
},
"find" : function (selector,parent){
var parent = parent || document;
//去除空行
var selector = selector.replace(/(^\s*)|(\s*$)/g,"");
var parts = selector.split(/\s+/);
//这次需要查找的元素 它的形式可能是 .class #id div 这种形式
var eles = parts[0];
switch (eles.charAt(0)) {
case ".":
eles = get.getclass(eles.substring(1),parent);
break;
case "#":
var str = eles;
eles = [];
eles[0] = get.getid(str.substring(1));
break;
default:
eles = get.gettag(eles,parent);
break;
}
// 截取第二个元素之后的数组 并转成字符串
// var test = test.splice(1).join(" ");
var test = "";
for( var i = 1 ; i < parts.length ; i ++ ){
test += parts[i] + " ";
}
// 承接数组
var arr = [];
for( var i = 0 , len = eles.length ; i < len ; i ++ ){
if (test) {
var arr1 = this.find(test,eles[i]);
arr = arr.concat(arr1);
}else{
arr.push(eles[i]);
}
}
return arr;
}
}
console.log(get.find('body #div div'));
}
</script>
</body>
</html>
