JavaScript中DOM詳解
為了達(dá)到平穩(wěn)退化,向后兼容,標(biāo)記分離的思想,每次寫(xiě)js代碼時(shí)做的第一件事應(yīng)該是必要的測(cè)試和檢查工作:
在js文件里首先添加以下代碼進(jìn)行檢查:
window.onload = function(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementsByClassName) return false;
if(!document.getElementById("selector")) return false;
if(!document.getElementsByTagName("tag")) return false;
if(!document.getElementsByClassName("selector")) return false;
};
通用封裝函數(shù):
var $ = function(id){
return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){ //obj:元素對(duì)象名字,event:綁定事件,fn:觸發(fā)的回調(diào)函數(shù)
if(obj.addEventListener){
obj.addEventListener(event,fn,false);
}
else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
}
}
對(duì)于很多函數(shù)需要頁(yè)面加載即運(yùn)行,window.onload封裝方法如下:
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function")
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
火狐和IE之間的JavaScript差異:
1、在大多數(shù)情況下,為事件處理函數(shù)返回false,可以防止默認(rèn)的事件行為.例如,默認(rèn)情況下點(diǎn)擊一個(gè)a元素,頁(yè)面會(huì)跳轉(zhuǎn)到該元素href屬性指定的頁(yè)。
return false 就相當(dāng)于終止符,return true 就相當(dāng)于執(zhí)行符。
在js中對(duì)于return用法的三種景象的總結(jié)如下:
retrun true; 返回正確的處理懲罰成果。
return false;返回錯(cuò)誤的處理懲罰成果;終止處理懲罰;阻攔提交表單;阻攔履行默認(rèn)的行動(dòng)。
return;把把握權(quán)返回給頁(yè)面。
2、在絕大多數(shù)時(shí)候,把一個(gè)函數(shù)調(diào)用賦值給一個(gè)變量將是一個(gè)好主意。
3、noscript標(biāo)簽可被用于可識(shí)別 script標(biāo)簽但無(wú)法支持其中的腳本的瀏覽器。如果瀏覽器支持腳本,那么它不會(huì)顯示出 noscript 標(biāo)簽中的文本。
4、在動(dòng)態(tài)設(shè)置樣式時(shí),只要有可能,最好選用CSS,最簡(jiǎn)單的就是選擇最容易實(shí)現(xiàn)的方法。
5、在一個(gè)函數(shù)中會(huì)用到全局對(duì)象存儲(chǔ)為局部變量來(lái)減少全局查找,因?yàn)樵L問(wèn)局部變量的速度要比訪問(wèn)全局變量的速度更快些。
6、如果針對(duì)的是不斷運(yùn)行的代碼,不應(yīng)該使用setTimeout,而應(yīng)該是用setInterval,因?yàn)閟etTimeout每一次都會(huì)初始化一個(gè)定時(shí)器,而setInterval只會(huì)在開(kāi)始的時(shí)候初始化一個(gè)定時(shí)器。
7、如果要連接多個(gè)字符串,應(yīng)該少使用+= ,條件分支時(shí)盡量使用三目運(yùn)算符替代條件分支。
8、很多人喜歡使用parseInt(),其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字,而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換,我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()。
9、在JavaScript中所有變量都可以使用單個(gè)var語(yǔ)句來(lái)聲明,這樣就是組合在一起的語(yǔ)句,以減少整個(gè)腳本的執(zhí)行時(shí)間。
10、對(duì)于大的DOM更改,使用innerHTML要比使用標(biāo)準(zhǔn)的DOM方法創(chuàng)建同樣的DOM結(jié)構(gòu)快得多。
11、當(dāng)同一個(gè)對(duì)象使用.onclick的寫(xiě)法觸發(fā)多個(gè)方法的時(shí)候,后一個(gè)方法會(huì)把前一個(gè)方法覆蓋掉,也就是說(shuō),在對(duì)象的onclick事件發(fā)生時(shí),只會(huì)執(zhí)行最后綁定的方法。而用事件監(jiān)聽(tīng)則不會(huì)有覆蓋的現(xiàn)象,每個(gè)綁定的事件都會(huì)被執(zhí)行。
12、如果定義了toString()方法來(lái)進(jìn)行類(lèi)型轉(zhuǎn)換的話,推薦顯式調(diào)用toString(),因?yàn)閮?nèi)部的操作在嘗試所有可能性之后,會(huì)嘗試對(duì)象的toString()方法嘗試能否轉(zhuǎn)化為String,所以直接調(diào)用這個(gè)方法效率會(huì)更高。
13、因?yàn)閑lemet.style只能獲取內(nèi)聯(lián)樣式,而element.currentStyle.width是IE瀏覽器專有屬性,getComputedStyle(element, null).width是火狐和Chrome瀏覽器的特有屬性,所以為了兼容,獲取內(nèi)外樣式方法如下(不可取復(fù)合樣式,如background,border,而是應(yīng)該寫(xiě)成backgroundColor,borderWidth):
function getStyle(obj,name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,null)[name];
}
}
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實(shí)例形式分析了微信小程序使用wx.setNavigationBarTitle接口動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
一篇文章帶你吃透JavaScript中的DOM知識(shí)及用法
DOM作用:用來(lái)修改網(wǎng)頁(yè)內(nèi)容,結(jié)構(gòu)和樣式,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一篇文章帶你吃透JavaScript中的DOM知識(shí)及用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
unicloud云開(kāi)發(fā)進(jìn)階獲取首頁(yè)列表數(shù)據(jù)示例詳解
這篇文章主要為大家介紹了unicloud云開(kāi)發(fā)進(jìn)階獲取首頁(yè)列表數(shù)據(jù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
基于javascript實(shí)現(xiàn)貪吃蛇經(jīng)典小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)貪吃蛇小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12
BootStrap實(shí)現(xiàn)郵件列表的分頁(yè)和模態(tài)框添加郵件的功能
這篇文章主要介紹了bootstrap分頁(yè),模態(tài)框,實(shí)現(xiàn)郵件列表的分頁(yè),和模態(tài)框添加郵件的功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
jQuery實(shí)現(xiàn)騰訊信用界面(自制刻度尺)樣式
這篇文章主要介紹了jQuery實(shí)現(xiàn)騰訊信用界面(自制刻度尺)樣式,下文還總結(jié)了關(guān)于jquery中extend的方法,需要的朋友可以參考下2017-08-08
漂亮實(shí)用的頁(yè)面loading(加載)封裝代碼
要做一個(gè)異步登錄,打算給用戶做一點(diǎn)提示,所以就網(wǎng)上找了點(diǎn)代碼,自己修改新增了一些,做了一個(gè)html+css+js的功能封裝,供大家參考,需要的朋友參考下吧2017-02-02

