《JavaScript DOM 編程藝術（第2版）》- 綜合筆記

時間 2019-11-13

標籤 javascript dom 編程藝術綜合筆記欄目 JavaScript 简体版

原文原文鏈接

第 1 章 JavaScript 簡史

1.1 JavaScript 的起源

JavaScript 是 Netscape 公司與 Sun 公司合做開發的。javascript

JavaScript 是 ECMAScript 標準的一種實現，但在通常表述中，這二者是指同一種編程語言。css

1.2 DOM

DOM（Document Object Model，文檔對象模型），是一套對文檔的內容進行抽象和概念化的方法。html

經過 DOM 能夠對文檔內的某些實際內容進行查詢和操控。java

1.3 瀏覽器戰爭

1.3.1 DHTML

DHTML（Dynamic HMTL，動態 HTML），是描述 HTML、CSS 和 JavaScript 技術組合的術語。其背後的含義是：node

利用 HTML 把網頁標記爲各類元素；
利用 CSS 設置元素樣式和它們顯示的位置；
利用 JavaScript 實時地操控頁面和改變樣式。

1.3.2 瀏覽器之間的衝突

Netscape 公司和 Microsoft 公司的瀏覽器的 DOM 的差別，致使了當時 DHTML 技術的難以實現。編程

1.4 制定標準

W3C 於 1998 年 10 月完成了「第 1 級 DOM」（DOM Level 1）標準，這種標準化的 DOM 可讓任何一種程序設計語言對使用任何一種標記語言編寫出來的任何一種文檔進行操控。api

1.4.1 瀏覽器之外的考慮

DOM 是一種 API（Application Programming Interface，應用程序編程接口），也是一種已經獲得有關各方共同承認的基本約定。數組

W3C 對 DOM 的定義是：「一個與系統平臺和編程語言無關的接口，程序和腳本能夠經過這個接口動態的訪問和修改文檔的內容、結構和樣式。」瀏覽器

1.4.2 瀏覽器戰爭的結局

因爲 Windows 操做系統的成功，Netscape 公司輸了。戰爭促進了 DOM 標準的最終制定。網絡

1.4.3 嶄新的起點

WebKit 是 Safari 和 Chrome 採用的一個開源 Web 瀏覽器引擎；它與另外一個開源引擎——FireFox 的核心 Gecko，共同促進了 IE 的核心 Trident 等專有瀏覽器引擎逐步向 Web 標準靠攏。

1.5 小結

略。

第 2 章 JavaScript 語法

2.1 準備工做

使用 JavaScript 的兩種方式：

將代碼放到文檔 <head> 標籤中的 <script> 標籤之間；
將代碼保存爲擴展名 .js 的獨立文件，而後在文檔的 <head> 標籤中添加 <script> 標籤，並使用 <script> 標籤的 src 屬性指向該文件。

最好的作法是把 <script> 標籤放到 HTML 文檔的最後，</body> 標籤以前。

程序語言分爲解釋型和編譯型兩大類。Java 或 C++ 等語言須要一個編譯器（compiler）。編譯器是一種程序，可以把 Java 等高級語言編寫出來的源代碼翻譯爲直接在計算機上執行的文件。

解釋型程序設計語言不須要編譯器，僅須要解釋器，對於 JavaScript 語言，通常由瀏覽器負責完成有關的解釋和執行工做。

2.2 語法

2.2.1 語句

JavaScript 編寫的腳本又一系列指令構成，這些指令叫做語句（statement）。

各條語句放在不一樣行就能夠分隔開，若是多條語句要放在同一行，必須使用分號分隔；建議每條語句的末尾都加分號。

2.2.2 註釋

腳本中有一些須要解釋器直接忽略的僅供參考或提醒的信息，這類語句就是註釋（comment）。

單行註釋開頭使用雙斜線 //；
多行註釋須要將註釋內容使用 /* 和 */ 包裹起來。

2.2.3 變量

人們把那些會發生變化的東西稱爲變量（variable），例如人的心情、年齡等。

把值存入變量的操做稱爲賦值（assignment）。

JavaScript 容許直接對變量賦值而無需事先聲明這個變量，這在不少程序設計語言中是不容許的。

要求在使用任何變量以前必須先對它作出「介紹」，就叫做聲明（declare）。

在 JavaScript 中，若是對某個變量賦值以前未聲明該變量，賦值操做將自動聲明該變量。雖然如此，但提早聲明變量是良好的習慣，另外還關乎於變量的做用域與變量聲明提早等影響。

聲明變量使用 var 操做符（ES6 標準以前的方式）。另外：

能夠用一條語句一次聲明多個變量，變量名之間使用 , 分割；
變量的聲明和賦值操做能夠同時進行；

在 JavaScript 中變量名區分大小寫；變量名中只能使用字母、數字、下劃線 _ 和美圓符號 $，且第一個字符不能爲數字。

變量名通常使用駝峯格式（camel case）或在詞語之間使用下劃線鏈接的方式命名。

在 JavaScript 中直接在代碼中寫出的數據稱爲字面量（literal），字面量除了表示本身之外不能表示任何別的東西……「它就是它！」嗯……

2.2.4 數據類型

有些其餘語言要求在聲明變量的同時聲明變量的數據類型，這種作法稱爲類型聲明（typing）。

必須明確類型聲明的語言稱爲強類型（strongly typed）語言；而 JavaScript 不須要進行類型聲明，所以它是一種弱類型（weakly typed）語言。這意味着能夠在任何階段改變變量的數據類型。

JavaScript 中的重要數據類型有：

1. 字符串
字符串（string）類型由零個或多個字符構成（零個的稱爲「空字符串」），字符串必須包在引號裏，單引號雙引號皆可，通常推薦單引號，而且整個腳本要一致，這纔是良好的編程習慣。

若是要表示的字符串中包含單引號，爲了不解釋器認爲它是整個字符串的結尾，則將其放在雙引號中，反之則反。可是通常推薦使用轉義符來轉義（escaping）有代碼含義的字符，在 JavaScript 中，使用反斜線\對字符進行轉義。

2. 數值
數值（number）類型包含整數和帶任意位小數的浮點數。在數值前面加一個減號-表示該數值爲負數。

3. 布爾值
布爾（boolean）類型只包含兩個值—— true 和 false。

布爾值不是字符串，千萬不要把布爾值使用引號包起來。'false' 和 false 值兩碼事。

備註：書中只簡單提到三種基本數據類型，沒有提到另外兩種基本數據類型 undefined 和 null，以及複雜數據類型 object。

2.2.5 數組

字符串、數值和布爾值都是標量（scalar）。若是某個變量是標量，它在任意時刻就只能有一個值。若是想用一個變量來存儲一組值，就須要使用數組（array）。

數組是指用一個變量表示一個值的集合，集合中的每一個值都是這個數組的一個元素（element）。

聲明數組有兩種方式：

使用 Array 關鍵字，聲明數組的同時能夠指定數組的初始元素個數，也就是數組的長度（length）；
使用字符字面量的方式，即便用一對中括號來表示數組；

向數組中添加元素的操做稱爲填充（populating）；在填充數組時，須要給出新元素的值以及新元素在數組中的位置，這個位置就是這個元素的下標（index）；下標從 0 開始，數組裏每一個元素都有下標，使用下標時必須用方括號將其括起來。

前面提到的兩種聲明數組的方法均可以在聲明的同時，對數組進行填充操做。

數組元素能夠保存任何類型的數據，同一數組的元素也能夠保存不一樣類型的數據；若是數組的元素中保存了另外一個數組，這種數組被稱爲多元數組，多元數組雖然強大，但通常建議使用對象將複雜數據保存在數組中。

在填充數組時只給出了元素的值，其下標爲默認的數值，這個數組就是一個傳統數組；而在填充時爲元素同時添加下標和值，且下標不是數值，這種數組稱爲關聯數組。填充元素時將下標設置爲字符串，實際與爲數組添加屬性的操做相同。

備註：其實關聯數組與 JSON 格式的數據相似，可是不推薦使用關聯數組。

2.2.6 對象

與數組相似，對象也是使用一個名字表示一組值。對象的每一個值都是對象的一個屬性。

建立對象也有兩種方式：

使用 Object 關鍵字；
使用字符字面量的方式，即便用一對花括號來表示對象。

訪問、添加或修改對象的屬性可使用點號 .，也可使用中括號，中括號內的屬性名必須爲字符串，是要用引號括起來的。使用對象直接量的方式能夠同時聲明對象和爲對象添加屬性；屬性的值能夠是任何數據類型。

2.3 操做

對數據進行計算和處理的動做稱爲操做（operation）。

算數操做符

加 +、減 -、乘 *、除 / 操做，都是算術操做（arithmetic operation）；每一種都必須藉助於相應的操做符（operator）才能完成，操做符是 JavaScript 爲完成各類操做而定義的一些符號。

能夠把多種操做組合在一塊兒使用；爲避免產生歧義或提升運算優先級，可使用括號把不一樣的操做分割開。

爲一個變量加 1 能夠簡寫爲++，減法操做也能夠如此，再複習一遍前置 ++ 或 -- 和後置 ++ 或 -- 的區別：

前置 ++ / --先計算，後賦值；
後置 ++ / --先賦值，後計算。

這裏要重點一下加法操做符，當兩個操做數都爲數字時便進行加法操做，若是有一個操做數是字符串時，便將另外一個操做數轉換爲字符串並將兩個操做數首位相連地拼接（concatenation）爲一個字符串。

值或變量包含自身的加法（或拼接）/減法操做後的賦值能夠簡寫爲 += / -=。

2.4 條件語句

JavaScript 使用條件語句（conditional statement）來作判斷。

最多見的條件語句是 if 語句，條件必須放到 if 後面的圓括號中，條件的求值結果永遠是一個布爾值；花括號中的語句，只要在給定條件的求值結果爲 true 的狀況下才會執行。

若是 if 語句後面只有一條語句，能夠不加花括號，可是並不推薦這樣作。

2.4.1 比較操做符

比較操做符包括大於 >、小於 <、大於或等於 >=、小於或等於 <=、相等 ==、全等 ===、不相等 != 和不全等 !==。

一個等於號 = 是賦值操做符，不是比較操做符，因此不要在條件判斷時使用錯；若是使用了賦值操做符進行了條件判斷，會使判斷條件的結果最終取決於被賦值的變量轉換後的布爾值。

相等/不相等和全等/不全等的區別簡單的說是：相等操做符不表示嚴格相等，在比較時會發生兩個操做數的類型轉換；而全等是嚴格相等，須要數據類型和值徹底相等纔會返回 true，比較時是不會發生數據類型轉換的。

2.4.2 邏輯操做符

JavaScript 容許把條件語句裏的操做組合在一塊兒。判斷兩個或更多個條件的成立與否的操做，稱爲邏輯比較（operand）。

邏輯與操做符 && 只要在它的兩個操做數都爲真時纔會返回 true。

邏輯或操做符 || 只要有一個操做數爲真則會返回 true。

邏輯非操做符 ! 只能用於單個操做數，其結果是將操做數返回的布爾值取反。

2.5 循環語句

循環語句能夠反覆屢次執行同一段代碼，只要給定條件仍然能獲得知足，包含在循環語句中的代碼就將重複執行；一旦給定條件返回值再也不爲 true，則中止循環。

2.5.1 while 循環

只要圓括號內的給定條件求值爲 true，則包含在花括號裏的代碼反覆執行；通常會在花括號裏設定中止循環的條件。

do...while 循環

與 while 循環的區別是，在循環條件求值以前，包含在花括號裏的代碼至少會執行一次，而後再判斷循環條件是否成立。

2.5.2 for 循環

for 循環是 while 循環的一種變體。

for 循環最多見的用途是對某個數組裏的全體元素進行遍歷處理，通常狀況下，都會設定循環中止的條件爲，循環輪次變量小於數組的最大長度，即 i < arr.length。

2.6 函數

若是須要屢次使用同一段代碼，能夠把它們封裝成一個函數（function），函數就是一組容許在代碼裏隨時調用的語句，每一個函數其實是一個短小的腳本。

通常狀況下，須要先對函數作出定義再調用它們；固然也有自調用的匿名函數這種二般的狀況。

函數能夠接收傳遞進來的數據，並使用這些數據完成預約的操做，這些傳遞進函數的數據稱爲參數（argument）。

在定義函數時，能夠爲其聲明任意多個參數，它們之間須要使用逗號分隔；在函數內部能夠像使用普通變量通常使用任何一個傳遞進來的參數。

函數不只能夠接收數據，還能夠返回數據，返回數據使用 return 關鍵字，當結果返回完畢後，函數也將中止運行。

變量命名推薦使用下滑線分隔單詞，而函數命名推薦使用駝峯格式，這樣能夠一目瞭然的分辨變量和函數。

變量的做用域

變量能夠是全局的，也能夠是局部的。

全局變量（global variable）能夠在腳本中的任何位置被引用；全局變量的做用域是整個腳本。

局部變量（local variable）只存在於聲明它的函數內部，在該函數外部是沒法引用這個局部變量的；局部變量的做用域僅限於某個特定的函數內部。

前面提到變量聲明時，應該使用 var 關鍵字，這樣作就是爲了明確變量的做用域。不使用 var 關鍵字聲明的變量屬於全局變量，不論這個變量是在腳本的什麼位置聲明的。而使用 var 關鍵字，變量就將成爲一個局部變量，除非它不是在某個函數中。

函數在行爲方面應該像一個自給自足的腳本，在定義一個函數時，必定要把其內部變量所有明確地聲明爲局部變量。

2.7 對象

對象（object）是自包含的數據集合，包含在對象裏的數據能夠經過兩種形式訪問——屬性（property）和方法（method），對象就是由一些屬性和方法組合在一塊兒構成的數據實體：

屬性是隸屬於某個特定對象的變量；
方法是隻有某個特定對象才能調用的函數。

要訪問對象的屬性或方法，可使用點號。

實例（instance）是對象的具體個體；將對象實例化後，即可以訪問對象的屬性和方法。

爲給定對象建立一個新實例須要使用 new 關鍵字。

在 JavaScript 中，由用戶建立的對象被稱爲用戶自定義對象（user-defined object）；而語言提供的一系列預先定義好的對象稱爲內建對象（native object）。

2.7.1 內建對象

常見的內建對象如前面提到的數組對象（Array），以及經常使用的數學對象（Math）和日期對象（Date）等。

全部對象都是 Object 對象的實例。

具備抽象化的對象在命名時首字母通常都是大寫。

2.7.2 宿主對象

有一些非 JavaScript 提供的，但也是預先定義好的對象，它們是由 JavaScript 的運行環境提供的，這些對象稱爲宿主對象（host object）。

例如在瀏覽器環境中的 window 對象，在 Node.js 環境中是沒有的。這本書主要講的也是一個瀏覽器提供的宿主對象——Document 對象。

2.8 小結

略。

第 3 章 DOM

3.1 文檔：DOM 中的「D」

指的是 Document，即文檔。當建立一個網頁並把它加載到 Web 瀏覽器中時，瀏覽器便把網頁文檔轉換爲一個文檔對象。

3.2 對象：DOM 中的「O」

指的是 Object，即對象。宿主對象 window 是最基礎的對象之一，它對應着瀏覽器窗口自己，這個對象的屬性和方法一般統稱爲 BOM（Browser Object Model，瀏覽器對象模型）。

3.3 模型：DOM 中的「M」

指的是 Model，意思是「模型」，但更形象的描述是「Map」，即地圖。簡單理解，地圖標明瞭文檔中各個節點的方位和彼此之間的關係，JavaScript 能夠依照這個地圖，來訪問對應的元素。

書中用 DOM 樹來更清楚的表現了網頁的結構。

3.4 節點

節點（node）表示網絡中的一個鏈接點，一個網絡就是由一些節點構成的集合。

DOM 也是由節點構成的集合，在 DOM 中主要有三種節點：元素節點、文本節點以及屬性節點。

3.4.1 元素節點

元素節點（element node）是 DOM 的主要組成部分。

標籤的名字就是元素的名字，在通常狀況下，標籤就等於元素。

3.4.2 文本節點

在文檔中，文本節點（text node）老是被包含在元素節點的內部，但並不是全部元素節點都包含有文本節點。

3.4.3 屬性節點

屬性節點（attribute node）用來對元素節點做出更具體的描述。屬性老是被放在起始標籤中，因此屬性節點老是被包含在元素節點中。但並不是全部元素都包含屬性。

3.4.4 CSS

經過 CSS（Cascading Style Sheet，層疊樣式表）能夠告訴瀏覽器如何顯示一份文檔。

在 CSS 中，也把文檔內容視爲一棵節點樹，節點樹上的各個元素都將繼承（inheritance）其父元素的樣式屬性。

爲了把某個或多個元素與其餘元素區別開，須要使用標籤的 id 或 class 屬性。

1. class 屬性
能夠在全部元素上任意應用 class 屬性。class 屬性不具備惟一性。

2. id 屬性
id 屬性的用途是給網頁裏的某個元素加上一個獨一無二的標識符，也就是說在整個文檔中，id 屬性具備惟一性。

3.4.5 獲取元素

有 3 種 DOM 方法能夠獲取元素節點，分別是經過元素 ID、經過標籤名和經過類名來獲取。

1. getElmentById
該方法返回一個擁有指定 id 屬性的元素節點對應的對象。它是 document 對象特有的函數。

2. getElmentsByTagName
該方法返回的是一個對象數組，每一個對象對應文檔中有指定標籤名的元素。

該方法容許一個通配符*作爲其參數，這樣能夠將文檔中的全部標籤元素所有返回爲一個數組。

3. getElmentsByClassName 該方法爲 HTML5 DOM 中新增的方法，能夠經過標籤 class 屬性中的類名來訪問元素，返回值是一個對象數組，每一個對象對應文檔中具備指定類名的元素。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。