一起了解javascript dom 編程， 實戰經驗記錄筆記

最近都在學習JavaScript dom 程式了，怕自己以後會忘，特地對自己學習的內容進行了歸納整理， dom操作是什麼？ Document object mode 是w3c的標準。

1.JavaScript是一種讓網頁具有互動能力的程式設計語言。

2.設定瀏覽器屬性的屬性的方法叫做BOM.

3.駝峰式命名（myMood）是函數名稱、方法名稱和物件屬性名的命名首選格式。

4.命名變數的時候可以用底線來分隔每個單詞，命名函數的時候使用駝峰式命名。

5.函數在行為上應該像一個自給自足的腳本，在定義一個函數時，我們一定要把他內部的變數全都明確地宣告為局部變數。

6.由瀏覽器預先定義的物件稱為宿主物件。宿主物件包括From、Image，document等。

7.DOM（document object  model）。

8.在DOM中有元素節點（標籤）（文件中每一個元素都是物件）、文字節點（內容）、屬性節點（屬性）。

9.即使在整個文件中這個標籤只有一個元素，getElementsByTagName也回傳一個數組，此時數組的長度是1.。

10.getElementsByClassName傳回的是一個具有相同類別名稱的元素的陣列。

11.使用getElemntsByClassName指定多個類別名稱的時候，只需要在參數的時候將多個類別名稱以空格隔開
。
12.getElementsById返回的是一個對象，對象對應著文檔裡的一個特殊的元素節點
。
13.getAttribute和setAttribute兩個函數都只能用於元素節點。

14.DOM的工作模式：先載入文件的靜態內容，再動態刷新，動態刷新不影響文件的靜態內容，對頁面內容進行刷新卻不需要在瀏覽器裡刷新頁面。

15.在為某個元素新增了事件處理函數後，一旦事件發生，對應的JavaScript程式碼就會執行。被呼叫的JavaScript程式碼可以回傳一個值，這個值就會被傳遞給事件處理函數。假設在a標籤onclick裡面指定事件處理函數，當這個函數回傳一個true的時候，onclick事件就會認為a標籤中的連結被點擊了，如果回傳的是false就會被認為這個連結2沒有被點擊。所以，如果想要不觸發a標籤中的預設行為，在onclick裡面加上一句return false。

<li><a href="img/1.png" onclick="showpic(this);return false;">1</a> </li>

16.childNodes屬性可以用來取得任何一個元素的所有子元素，它是一個包含這個元素全部子元素的陣列。

17.要想知道一個節點的類型，可以使用nodeType來查看節點的型別
nodeType=1   節點為元素節點

           =2            属性节点
           =3            文本节点

18.window.open()開啟一個新的瀏覽器視窗。

function popUrl(winURL) {
        window.open(winURL,"popup","width:320px,height:400px");
    }
    popUrl('canvas.html');

19.平穩退化（當瀏覽器不支援js程式碼的時候不影響網頁的正常功能。）

20.效能考慮
（1）盡量少訪問DOM：不管什麼時候，只要是查詢DOM中的某些元素，瀏覽器都會搜尋整個DOM樹，從中尋找可能符合的元素。換句話說或每次使用getElementBy*的時候都會遍歷整個DOM樹，所以最好是使用一次來獲得元素並將元素儲存在一個變數當中。
（2）盡量少使用標記：過多不必要的元素只會增加DOM樹的規模，進而增加遍歷DOM樹以尋找特定元素的時間。
（3）包含腳本的最佳方法是使用外部文件，並將多個js文件合併在一起。就可以減少載入頁面時發送的請求數量。
（4）把所有Script標籤都放在文件的結尾，body標籤結束之前，就可以讓頁面變得更快。
（5）壓縮腳本：把腳本文字中不必要的字節，如空格和註解統統刪除，從而達到壓縮檔案的目的。

21.HTTP協定規範，瀏覽器每次從同一個餘名中最多能同時下載兩個檔案。

22.如果想用JavaScript在某個網頁上加入一些行為，就不應該讓JavaScript程式碼對這個網頁的結構有任何依賴。

23.如果一個函數有多個出口，將這些出口集中安排在函數的開頭部分。

24.循環判斷一組a標籤被點擊後所做的js處理

function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById('imagegallery')) return false;
    var gallery = document.getElementById('imagegallery');
    var links  = gallery.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++){
        links[i].onclick = function () {
            showpic(this);
            return false;
        }
    }
}

25.addLoadEvent():自己寫腳本函數，用來新增頁面載入的時候需要處理的函數

function addLoadEvent(func) {
  var onload = window.onload;
  if (typeof window.onload !=func){
  window.onload = func;
  }else {
  window.onload = function (ev) {
  oldload();
  func();
  }
  }
}

26.createTextNode用來建立文字節點

var txt =  document.createTextNode("hello world");

27.js想要在文件裡面插入內容的時候，要從dom的角度出發。例如在p裡面插入一個p段落：

在js裡面想要插入一個p

var p = document.createElement("p");
var txt = document.creatTextNode('hello world');
var p = document.getElementById("myp");
p.appendChild(p);
p.appendChild(txt);

28.insertBefore() ,:在元素的前面插入元素，

相關文章：

《Java Script DOM程式設計藝術》讀書筆記

《JavaScript DOM 程式設計藝術》讀書筆記之DOM基礎_javascript技巧

#

相關影片：

JavaScript&DOM影片教學

以上是一起了解javascript dom 編程， 實戰經驗記錄筆記的詳細內容。更多資訊請關注PHP中文網其他相關文章！