最近都在學習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段落:
var p = document.createElement("p"); var txt = document.creatTextNode('hello world'); var p = document.getElementById("myp"); p.appendChild(p); p.appendChild(txt);
28.insertBefore() ,:在元素的前面插入元素,
相關文章:
《JavaScript DOM 程式設計藝術》讀書筆記之DOM基礎_javascript技巧
#相關影片:
以上是一起了解javascript dom 編程, 實戰經驗記錄筆記的詳細內容。更多資訊請關注PHP中文網其他相關文章!