javascript dom 編程讀書筆記

cyixlq 發(fā)布于2019-08-23 10:22 / 2670人閱讀

摘要：設(shè)定瀏覽器屬性的屬性的方法叫做駝峰式命名是函數(shù)名方法名和對象屬性名的命名首選格式。由瀏覽器預(yù)先定義的對象被稱為宿主對象。在給某個元素添加了事件處理函數(shù)后，一旦事件發(fā)生，相應(yīng)的代碼就會執(zhí)行。

1.JavaScript是一個使網(wǎng)頁具有交互能力的程序設(shè)計(jì)語言。

2.設(shè)定瀏覽器屬性的屬性的方法叫做BOM.

3.駝峰式命名（myMood）是函數(shù)名、方法名和對象屬性名的命名首選格式。

4.命名變量的時候可以用下劃線來分隔每個單詞，命名函數(shù)的時候使用駝峰式命名。

5.函數(shù)在行為方面應(yīng)該像一個自給自足的腳本，在定義一個函數(shù)時，我們一定要把他內(nèi)部的變量全都明確地聲明為局部變量。

6.由瀏覽器預(yù)先定義的對象被稱為宿主對象。宿主對象包括From、Image，document等。

7.DOM（document object model）。

8.在DOM中有元素節(jié)點(diǎn)（標(biāo)簽）（文檔中每一個元素都是一個對象）、文本節(jié)點(diǎn)（內(nèi)容）、屬性節(jié)點(diǎn)（屬性）。

9.即使在整個文檔中這個標(biāo)簽只有一個元素，getElementsByTagName也返回一個數(shù)組，此時數(shù)組的長度是1.。

10.getElementsByClassName返回的是一個具有相同類名的元素的數(shù)組。

11.使用getElemntsByClassName指定多個類名的時候，只需要在參數(shù)的時候?qū)⒍鄠€類名以空格隔開
。
12.getElementsById返回的是一個對象，對象對應(yīng)著文檔里的一個特殊的元素節(jié)點(diǎn)
。
13.getAttribute和setAttribute兩個函數(shù)都只能用于元素節(jié)點(diǎn)。

14.DOM的工作模式：先加載文檔的靜態(tài)內(nèi)容，再動態(tài)刷新，動態(tài)刷新不影響文檔的靜態(tài)內(nèi)容，對頁面內(nèi)容進(jìn)行刷新卻不需要在瀏覽器里刷新頁面。

15.在給某個元素添加了事件處理函數(shù)后，一旦事件發(fā)生，相應(yīng)的JavaScript代碼就會執(zhí)行。被調(diào)用的JavaScript代碼可以返回一個值，這個值就會被傳遞給事件處理函數(shù)。假設(shè)在a標(biāo)簽onclick里面指定事件處理函數(shù)，當(dāng)這個函數(shù)返回一個true的時候，onclick事件就會認(rèn)為a標(biāo)簽中的鏈接被點(diǎn)擊了，如果返回的是false就會被認(rèn)為這個鏈接2沒有被點(diǎn)擊。所以，如果想要不觸發(fā)a標(biāo)簽中的默認(rèn)行為，在onclick里面添加一句return false。

16.childNodes屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素全部子元素的數(shù)組。

17.要想知道一個節(jié)點(diǎn)的類型，可以使用nodeType來查看節(jié)點(diǎn)的類型
nodeType=1 節(jié)點(diǎn)為元素節(jié)點(diǎn)

           =2            屬性節(jié)點(diǎn)
           =3            文本節(jié)點(diǎn)

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

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

19.平穩(wěn)退化（當(dāng)瀏覽器不支持js代碼的時候不影響網(wǎng)頁的正常功能。）

20.性能考慮
（1）盡量少訪問DOM：不管什么時候，只要是查詢DOM中的某些元素，瀏覽器都會搜索整個DOM樹，從中查找可能匹配的元素。換句話就是或每次使用getElementBy*的時候都會遍歷整個DOM樹，所以最好是使用一次來獲得元素并將元素存儲在一個變量當(dāng)中。
（2）盡量少使用標(biāo)記：過多不必要的元素只會增加DOM樹的規(guī)模，進(jìn)而增加遍歷DOM樹以查找特定元素的時間。
（3）包含腳本的最佳方式就是使用外部文件，并將多個js文件合并在一起。就可以減少加載頁面時發(fā)送的請求數(shù)量。
（4）把所有Script標(biāo)簽都放在文檔的末尾，body標(biāo)簽結(jié)束之前，就可以讓頁面變得更快。
（5）壓縮腳本：把腳本文本中不必要的字節(jié)，如空格和注釋統(tǒng)統(tǒng)刪除，從而達(dá)到壓縮文件的目的。

21.HTTP協(xié)議規(guī)范，瀏覽器每次從同一個余名中最多能同時下載兩個文件。

22.如果想用JavaScript給某個網(wǎng)頁添加一些行為，就不應(yīng)該讓JavaScript代碼對這個網(wǎng)頁的結(jié)構(gòu)有任何依賴。

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

24.循環(huán)判斷一組a標(biāo)簽被點(diǎn)擊后所做的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():自己編寫腳本函數(shù)，用來添加頁面加載的時候需要處理的函數(shù)

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

26.createTextNode用來創(chuàng)建文本節(jié)點(diǎn)

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

27.js想要在文檔里面插入內(nèi)容的時候，要從dom的角度出發(fā)。例如在div里面插入一個p段落：

在js里面想要插入一個p

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

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