首頁 > web前端 > js教程 > 一起了解javascript dom 編程, 實戰經驗記錄筆記

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

php是最好的语言
發布: 2018-07-27 15:41:37
原創
1395 人瀏覽過

最近都在學習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(&#39;canvas.html&#39;);
登入後複製

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(&#39;imagegallery&#39;)) return false;
    var gallery = document.getElementById(&#39;imagegallery&#39;);
    var links  = gallery.getElementsByTagName(&#39;a&#39;);
    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(&#39;hello world&#39;);
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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板