常用操作DOM的方法及对象封装

 

1、使用Javascript打印出1-10000之间的所有对称数（例如 121 1331等）【掌握】
代码：

 

function print(start,end) {
	if (start>end) {
		return [];
	}
	var res=[];
	for(var i=start;i<end;i++){
		var len=i.toString().length;
		if (i.toString()===i.toString().split('').reverse().join('')&&len>1) {
			res.push(i); 
		}
	}
	return res;
}

 

2、写一个traverse函数，输出所有页面宽度和高度大于50像素的节点。【掌握】

 

function traverse(){
	var arr=[...document.querySelector('body *')];
	return arr.filter(function(node){
		return node.offsetWidth>50&&node.offsetHeight>50;
	});
}

 

3、js对象的深度克隆代码实现【掌握】

 

function deepClone(obj){
	var newObj=obj instanceof Array?[]:{};
	for (var attr in obj) {
		if (obj.hasOwnProperty(attr)) {//防止复制原型链上的属性
			newObj[attr]=typeof obj[attr]=='object'?deepClone(obj[attr]):obj[attr];
		}
	}
	return newObj;
}

 

4、编写一个JavaScript函数，实时显示当前时间，格式“年-月-日 时:分:秒”。【掌握】
代码：

 

(function curTime(){
	setInterval(function(){
		let time=new Date();
		let [year,month,day,hour,minute,second]=[time.getFullYear(),time.getMonth()+1,time.getDate(),time.getHours(),time.getMinutes(),time.getSeconds()];
		var cur=year+'-'+month+'-'+day+' '+hour+':'+minute+":"+second;
		console.log(cur);
	},1000);
})();

 

5、js操作和获取cookie【掌握】
代码：

 

function setCookie(name,value,expires,path,domain,secure) {
    var cookieText=encodeURIComponent(name)+'='+encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText+=';expires='+expires;
    }
    if (path) {
        cookieText+=';path='+path;
    }
    if (domain) {
        cookieText+=';domain='+domain;
    }
    if (secure) {
        cookieText+=';secure';
    }
    document.cookie=cookieText;
}
// 获取cookie
function getCookie(name) {
    var cookieName=encodeURIComponent(name)+'=';
    var cookieStart=document.cookie.indexOf(cookieName);
    var cookieValue=null;
    if (cookieStart>-1) {
        var cookieEnd=document.cookie.indexOf(';',cookieStart);
        if (cookieEnd==-1) {
            cookieEnd=document.cookie.length;
        }
        cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
    }
    return cookieValue;
}
// 删除cookie
function unsetCookie(name) {
    document.cookie=name+'=;expires='+new Date(0);
}

 

6、写一个通用的事件监听器函数【掌握】
代码：

 

obj.eventFunc={
	addEvent(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element[type+handler]=function(e){
                handler.call(element,window.event);
            };
			//不用匿名函数是为了便于移除事件
            element.attachEvent("on"+type, element[type+handler]);
        }
    },
    removeEvent(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,element[type+handler]);
            element[type+handler]=null;
        }
    },
    getEvent(e){
        return e||window.event;
    }, 
    getTarget(e){
        e=this.getEvent(e);
        var target=e.target||e.srcElement;
        if(target.nodeType==3){//如果是Safari下的文本节点
            target = target.parentNode;
        }
        return target;
    },
    getCharCode(e){
        e=this.getEvent(e);
        if(typeof e.charCode=="number"){
			return e.charCode;
		}else{
			return e.keyCode;
		}   
    }, 
    preventDefault(e){
        e=this.getEvent(e);
        if(e.preventDefault){
			e.preventDefault();
		}else{
			e.returnValue = false;
		}
	}, 
    stopPropagation(e){
        e=this.getEvent(e);
        if(e.stopPropagation){
			e.stopPropagation();
		}else{
			e.cancelBubble = true;
		}    
    },
}

 

7、用javascript实现用户登录验证的代码。【掌握】

 

//检查对象checkObject
var checkObject=function(){
	var tipP=document.createElement("p");
	tipP.appendChild(document.createTextNode("密码错误"));
	var tipU=document.createElement("p");
	tipU.appendChild(document.createTextNode("用户名错误"));
 
	function addErrorTip(node,type){
		node.className='error';
		if(type=='username'){
			node.parentNode.appendChild(tipU);  
		}else if(type == 'password'){
			node.parentNode.appendChild(tipP);
		}
	}
	function removeErrorTip(node,type){
		node.className='';                
		if(type==='username'){                    
			node.parentNode.removeChild(tipU);  
		}else if(type==='password'){
			node.parentNode.removeChild(tipP);
		}
	}
	function isValidName(name){
		if(name){
			return true;
		}else{
			return false;
		}
	}
	function isValidPassword(password){
		var lenIsEnough=password.length>6; //密码长度大于6
		var hasDigital=/{\d}+/.test(password); //密码包含数字
		var hasCharater=/{\w}+/.test(password); //密码包含其它字符         
		return lenIsEnough&&hasDigital&&hasCharater;
	}
	return {
		addErrorTip:addErrorTip,
		removeErrorTip:removeErrorTip,
		isValidName:isValidName,
		isValidPassword:isValidPassword
	};
};
//创建一个检查对象的实例checkObj    
var checkObj=checkObject();
var form=document.forms['login-form'];
var username=form['username'];   //name是关键字
var password=form['password']; 
       
form.addEventListener('submit',function(e){                
	if(!checkObj.isValidName(username.value)) {
		checkObj.addErrorTip(username,'username');
		e.preventDefault();     
	}
	if(!checkObj.isValidPassword(password.value)) {
		checkObj.addErrorTip(password,'password');                              
		e.preventDefault();
	}
}, false);

form.addEventListener('reset',function(){
	checkObj.removeErrorTip(username,'username');
	checkObj.removeErrorTip(password,'password');
},false);
	 
username.addEventListener('blur',function() {
	if (!checkObj.isValidName(username.value)) {
		checkObj.addErrorTip(username,'username');
	}
}, false);

username.addEventListener('focus',function() {
	checkObj.removeErrorTip(username,'username');
}, false);

password.addEventListener('blur',function() {
	if (!checkObj.isValidPassword(password.value)) {
		checkObj.addErrorTip(password,'password');
	}
}, false);

password.addEventListener('focus',function(event) {
	checkObj.removeErrorTip(password,'password');
}, false);

 

8、我们在进行组件开发的时候，经常会需要用到大量颜色。有两种方法。方法1：预先定义好大量的颜色；方法2：自定义函数，采用随机生成颜色的方式。请采用方法2实现随机颜色汲取。
代码：

 

function getColor(){
	var hex=(Math.random()*0xffffff).toString(16);
	return '#'+hex.split('.')[0];
}

 

9、编写一个JavaScript函数，输入指定类型的选择器
(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)
可以返回匹配的DOM节点数组，需考虑浏览器兼容性和性能。

 

var query = function(selector){
	var str=selector.match(/^(\.|#)?(\w+)$/);
	var res=[];
	if (str) {
		switch(str[1]) {
			case '.':
				res=[...document.getElementsByClassName(str[2])];
				break;
			case '#':
				res.push(document.getElementById(str[2]));
				break;
			default:
				res=[...document.getElementsByTagName(str[2])];
		}
	}
	return res;
}