javaScript中getElementByClassName的实现

Aini0000year

2015-04-28

<style>
	body{
		margin:0px;
		padding:0px;
		}
	#div1{
		width:300px;
		height:200px;
		background:#CC3;
		margin:30px auto 0px 10px;
		position:relative;
		}
	#div2{
		width:300px;
		height:200px;
		background:#096;
		position:absolute;
		left:310px;
	}
	#div11{
		margin-left:10px;
		}	
</style>

</head>
<body>
	<div id='div1' class='div1'>
    	xxxxxx
        <div id='div11' class='div1'>fasdfa</div>
    </div>
	<div id='div2' class='div1'>
    
    </div>
    <div id='div3' class='div1'  style="width:200px">
    	<div id='div31' class='div1'></div>
    </div>

</body>

//测试版本 chrome  40.0.2214.115 
//getElementByClassName函数做兼容
//最重要的部分在最后一个测试函数，看懂了也可以不用再看了
window.onload=function(){
		//先来看看本浏览器是否兼容
		console.info(document.getElementsByClassName('div1'));
		console.info(document.getElementById('div1').getElementsByClassName('div1'));
		var oNodes=document.getElementsByTagName('*');
		console.info(oNodes);//HTMLCollection[14]
		for(var i=0;i<oNodes.length;i++){
				console.info(oNodes[i]+' '+oNodes[i].className+' '+i);
				if(oNodes[i].className){
						console.info('calssName:  '+oNodes[i].className);
					}else{
							console.info('calssName: 不存在');
						}
				
			}
			
			
		//进入正题
		//思路
		//先getElementsByTagName('*'),再从中选取符合要求的返回
		//参数两个，第一个限制所选节点的范围，第二要查的元素名称
		
		//测试下正则表达式
		var temp=new RegExp("^|\\s"+"fsdfsa"+"\\s|$","ig")
		console.info(temp);
		console.info(temp.test(  'fSdfsa'  ));
		//和最下面测试的一样，添加到Object的原型上，不然找不到方法
		function getFilter(className){
				//首先判断是否兼容
				if(this.getElementsByClassName){
						this.getElementsByClassName(className);
					}else{	
							var ret=[];
							var oNodes=this.getElementsByTagName('*');
							for(var i=0;i<oNodes.length;i++){
									if(new RegExp("^|\\s"+className+"\\s|$","ig").test(oNodes[i].className)){
											ret.push(oNodes[i]);
										}
								}
							return ret;
						}
				
			}
		//单独拿出测测
		
		/*function getFilter1(className){
				var ret=[];
				var oNodes=this.getElementsByTagName('*');
				for(var i=0;i<oNodes.length;i++){
						if(new RegExp("^|\\s"+className+"\\s|$","ig").test(oNodes[i].className)){
								ret.push(oNodes[i]);
							}
					}
				return ret;
			}*/
		//简单实用的getElementsByTagName方法就实现了
		 Object.prototype.getFilter1=function(className){
				var ret=[];
				var oNodes=this.getElementsByTagName('*');
				for(var i=0;i<oNodes.length;i++){
						if(new RegExp("^|\\s"+className+"\\s|$","ig").test(oNodes[i].className)){
								ret.push(oNodes[i]);
							}
					}
				return ret;
			};
		 console.info(document.getElementById('div1').getFilter1('div1'));//结果就对了
	};

//至此结束

javascript