常用操作DOM的方法及物件封裝
阿新 • • 發佈：2019-01-08
1、使用Javascript打印出1-10000之間的所有對稱數（例如 121 1331等）【掌握】
程式碼：
程式碼：
程式碼：
程式碼：
程式碼：
(僅需支援id，class，tagName三種簡單CSS選擇器，無需相容組合選擇器)
可以返回匹配的DOM節點陣列，需考慮瀏覽器相容性和效能。
程式碼：
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;
} function traverse(){
var arr=[...document.querySelector('body *')];
return arr.filter(function(node){
return node.offsetWidth>50&&node.offsetHeight>50;
});
}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;
} 程式碼：
(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);
})(); 程式碼：
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);
}程式碼：
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;
}
},
}//檢查物件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);程式碼：
function getColor(){
var hex=(Math.random()*0xffffff).toString(16);
return '#'+hex.split('.')[0];
}(僅需支援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;
}