首頁 > web前端 > js教程 > 主體

JavaScript中DOM詳解_javascript技巧

WBOY
發布: 2016-05-16 16:04:47
原創
1263 人瀏覽過

為了達到平穩退化,向後相容,標記分離的思想,每次寫js程式碼時做的第一件事應該是必要的測試和檢查工作:
在js檔案裡先加入以下程式碼進行檢查:

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;
};
登入後複製

通用封裝函數:

var $ = function(id){
   return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){  //obj:元素对象名字,event:绑定事件,fn:触发的回调函数
   if(obj.addEventListener){
obj.addEventListener(event,fn,false);
   }
   else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
   }
}
登入後複製

對於許多函數需要頁面載入即運行,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、在大多數情況下,為事件處理函數傳回false,可以防止預設的事件行為.例如,預設點擊一個a元素,頁面會跳到該元素href屬性指定的頁。
return false 就相當於終止符,return true 就相當於執行符。
在js中return用法的三種景象的總結如下:
retrun true; 傳回正確的處理懲罰成果。
return false;傳回錯誤的處理懲罰成果;終止處理懲罰;阻止提交表單;阻擋履行預設的行動。
return;把把握權回傳給頁。

2、在絕大多數時候,把一個函數呼叫賦值給一個變數會是個好主意。

3、noscript標籤可被用於可識別 script標籤但無法支援其中的腳本的瀏覽器。如果瀏覽器支援腳本,那麼它不會顯示 noscript 標籤中的文字。

4、在動態設定樣式時,只要有可能,最好選用CSS,最簡單的就是選擇最容易實現的方法。

5、在一個函數中會用到全域物件儲存為局部變數來減少全域查找,因為存取局部變數的速度要比存取全域變數的速度更快。

6、如果針對的是不斷運作的程式碼,不應該使用setTimeout,而應該是用setInterval,因為setTimeout每次都會初始化一個計時器,而setInterval只會在開始的時候初始化一個計時器。

7.如果要連接多個字串,應該少使用 = ,條件分支時盡量使用三目運算子替代條件分支。

8、很多人喜歡使用parseInt(),其實parseInt()是用來將字串轉換成數字,而不是浮點數和整數之間的轉換,我們應該使用Math.floor()或Math. round()。

9、在JavaScript中所有變數都可以使用單一var語句來聲明,這樣就是組合在一起的語句,以減少整個腳本的執行時間。

10、對於大的DOM更改,使用innerHTML要比使用標準的DOM方法創建相同的DOM結構快得多。

11、當同一個物件使用.onclick的寫法觸發多個方法的時候,後一個方法會把前一個方法覆蓋掉,也就是說,在物件的onclick事件發生時,只會執行最後綁定的方法。而用事件監聽則不會有覆蓋的現象,每個綁定的事件都會被執行。

12、如果定義了toString()方法來進行類型轉換的話,推薦明確調用toString(),因為內部的操作在嘗試所有可能性之後,會嘗試物件的toString()方法嘗試能否轉換為String,所以直接呼叫這個方法效率會比較高。

13、因為elemet.style只能取得內聯樣式,而element.currentStyle.width是IE瀏覽器專有屬性,getComputedStyle(element, null).width是火狐和Chrome瀏覽器的獨特屬性,所以為了相容,取得內外樣式方法如下(不可取複合樣式,如background,border,而是應該寫成backgroundColor,borderWidth):

function getStyle(obj,name) {
   if(obj.currentStyle) {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj,null)[name];
   }
}
登入後複製

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!