JavaScript 筆記：

初識 JavaScript

JavaScript ECMAscript超細筆記（壹）

JavaScript DOM超細筆記

目錄

DOM

1. DOM 簡介

1.1 什么是 DOM

1.2 DOM 樹

2. 獲取元素

2.1 獲取頁面元素

2.2 根據 ID 獲取

2.3 根據標簽名獲取

2.4 通過 HTML5 新增的方法獲取

2.5 獲取特殊元素（body，html)

3. 事件基礎

3.1 事件概述

3.2 事件三要素

3.3 執行事件的步驟

3.4 常見的滑鼠事件

4. 操作元素

4.1 改變元素內容

4.2 常用元素的屬性操作

4.3 表單元素的屬性操作

4.4 樣式屬性操作

4.5 自定義屬性的操作

5. 節點操作

5.1 節點概述

5.2 節點層級

5.3 創建節點

5.4 添加節點

5.5 洗掉節點

5.6 復制節點（克隆節點）

6. DOM 重點核心

6.1 創建

6.2 增

6.3 刪

6.4 改

6.5 查

6.6 屬性操作

6.7 操作事件

事件高級

1. 注冊事件

1.1 注冊事件概述

1.2 addEventListener 事件監聽方式

2. 洗掉事件（解綁事件）

2.1 洗掉事件的方式

3. DOM事件流

4. 事件物件

4.1 什么是事件物件

4.2 事件物件的常見屬性和方法

5. 阻止事件冒泡

5.1 阻止事件冒泡

6. 事件委托（代理、委派）

7. 常見的滑鼠事件

7.1 常見的滑鼠事件

7.2 滑鼠事件物件

8. 常用的鍵盤事件

8.1 常用鍵盤事件

8.2 鍵盤事件物件

---

DOM

1. DOM 簡介

1.1 什么是 DOM

檔案物件模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程介面，

W3C 已經定義了一系列的 DOM 介面，通過這些 DOM 介面可以改變網頁的內容、結構和樣式，

1.2 DOM 樹

• 檔案：一個頁面就是一個檔案，DOM 中使用 document 表示
• 元素：頁面中的所有標簽都是元素，DOM 中使用 element 表示
• 節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），DOM 中使用 node 表示

DOM把以上內容都看做是物件

2. 獲取元素

2.1 獲取頁面元素

• 根據 ID 獲取
• 根據標簽名獲取
• 通過 HTML5 新增的方法獲取
• 特殊元素獲取

2.2 根據 ID 獲取

使用 getElementById() 方法可以獲取帶有 ID 的元素物件，

document.getElementById('id')

使用 console.dir() 可以列印我們獲取的元素物件，更好的查看物件里面的屬性和方法，

2.3 根據標簽名獲取

使用 getElementsByName() 方法可以回傳帶有指定標簽名的物件的集合，

document.getElementsByName('標簽名')

注意：

• 因為得到的是一個物件的集合，所以我們想要操作里面的元素就需要遍歷，
• 得到元素物件是動態

2.4 通過 HTML5 新增的方法獲取

document.getElementsByClassName('類名')	// 根據類名回傳元素物件集合
document.querySelector('選擇器')			// 根據指定選擇器回傳第一個元素物件
document.querySelectorAll('選擇器')		// 根據指定選擇器回傳

注意：

querySelector 和 querySelectofAll 里面的選擇器需要加符號，比如：document.querySelector('#nav')

2.5 獲取特殊元素（body，html)

// 獲取body元素
document.body				// 回傳body元素物件
// 獲得html元素
document.documentElement	// 回傳html元素物件

3. 事件基礎

3.1 事件概述

JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行為，

簡單理解： 觸發--- 回應機制，

3.2 事件三要素

1. 事件源（誰）

2. 事件型別（什么事件）

3. 事件處理程式（做啥）

3.3 執行事件的步驟

1. 獲取事件源

2. 注冊事件（系結事件）

3. 添加事件處理程式（采用函式賦值形式）

// 1. 獲取事件源
let btn = document.getElementById('btn')
// 2. btn.onclick 注冊事件 
// 3. 添加事件處理程式
btn.onclick = function() {
    alter('你好')
}

3.4 常見的滑鼠事件

滑鼠事件	觸發條件
onclick	滑鼠點擊左鍵觸發
onmouseover	滑鼠經過觸發
onmouseout	滑鼠離開觸發
onfocus	獲得滑鼠焦點觸發
onblur	失去滑鼠焦點觸發
onmousemove	滑鼠移動觸發
onmouseup	滑鼠彈起觸發
onmousedown	滑鼠按下觸發

4. 操作元素

JavaScript 的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容 、屬性等，注意以下都是屬性

4.1 改變元素內容

element.innerText

從起始位置到終止位置的內容, 但它去除 html 標簽， 同時空格和換行也會去掉

element.innerHTML

起始位置到終止位置的全部內容，包括 html 標簽，同時保留空格和換行

4.2 常用元素的屬性操作

// 1. innerText、innerHTML	改變元素內容
// 2. src、href
element.src	// 可修改圖片路徑

4.3 表單元素的屬性操作

利用 DOM 可以操作如下表單元素的屬性：

type、value、checked、selected、disabled

4.4 樣式屬性操作

我們可以通過 JS 修改元素的大小、顏色、位置等樣式，

element.style			// 行內樣式操作
element.className		// 類名樣式操作

注意：

1. JS 里面的樣式采取駝峰命名法 比如 fontSize、 backgroundColor

2. JS 修改 style 樣式操作，產生的是行內樣式，CSS 權重比較高

3. className 會直接更改元素的類名，會覆寫原先的類名，

總結

4.5 自定義屬性的操作

1. 獲取屬性值

// element.屬性    獲取屬性值
element.getAttribute('屬性')

區別：

• element.屬性 獲取內置屬性值（元素本身自帶的屬性）
• element.getAttribute(‘屬性’) 主要獲得自定義的屬性 （標準） 我們程式員自定義的屬性

2. 設定屬性值

element.屬性 = '值'		// 設定內置屬性值
element.setAttribute('屬性', '值')

區別：

• element.屬性 設定內置屬性值
• element.setAttribute(‘屬性’) 主要設定自定義的屬性 （標準）

3. 移除屬性

element.removeAttribute('屬性')

4.6 H5 自定義屬性

自定義屬性目的：是為了保存并使用資料，有些資料可以保存到頁面中而不用保存到資料庫中，

1. 設定H5自定義屬性

H5規定自定義屬性data-開頭做為屬性名并且賦值，

<div data-index="1"></div>

2. 獲取H5自定義屬性

要獲取以 data 開頭的屬性

element.dataset.index 或者 element.dataset['index']    // ie 11才開始支持

5. 節點操作

5.1 節點概述

網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），在DOM 中，節點使用 node 來表示， HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或洗掉，

一般地，節點至少擁有nodeType（節點型別）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性，

• 元素節點 nodeType 為 1
• 屬性節點 nodeType 為 2
• 文本節點 nodeType 為 3 （文本節點包含文字、空格、換行等）

我們在實際開發中，節點操作主要操作的是元素節點

5.2 節點層級

利用 DOM 樹可以把節點劃分為不同的層級關系，常見的是父子兄層級關系

1. 父級節點

node.parentNode

• parentNode 屬性可回傳某節點的父節點，注意是最近的一個父節點
• 如果指定的節點沒有父節點則回傳 null

2. 子節點

1. parentNode.childNodes	（標準）

parentNode.childNodes 回傳包含指定節點的子節點的集合，

注意：

回傳值里面包含了所有的子節點，包含元素節點，文本節點等

如果只想要獲得里面的元素節點，則需要專門處理， 所以我們一般不提倡使用 childNodes

2. parentNode.children	（非標準）

parentNode.children 是一個只讀屬性，回傳所有的子元素節點，它回傳子元素節點，其余節點不回傳（重點掌握）

3. parentNode.firstChild
4. parentNode.lastChild

firstChild 回傳第一個子節點，找不到則回傳null，同樣，也是包含所有的節點，

lastChild 回傳最后一個子節點，找不到則回傳null，同樣，也是包含所有的節點，

注意：這3，4兩個方法有兼容性問題，IE9 以上才支持，

3. 兄弟節點

1. node.nextSibling

node.nextSibling 回傳當前元素的下一個兄弟元素節點，找不到則回傳null，同樣，也是包含所有的節點，

2. node.previousSibling

previousSibling 回傳當前元素上一個兄弟元素節點，找不到則回傳null，同樣，也是包含所有的節點，

3. node.nextElementSibling

nextElementSibling 回傳當前元素下一個兄弟元素節點，找不到則回傳null，

4. node.previousElementSibling

previousElementSibling 回傳當前元素上一個兄弟節點，找不到則回傳null，

注意：3，4兩個方法有兼容性問題， IE9 以上才支持

5.3 創建節點

document.createElement('tagName')

document.createElement() 方法創建由 tagName 指定的 HTML 元素，因為這些元素原先不存在，是根據我們的需求動態生成的，所以我們也稱為動態創建元素節點，

5.4 添加節點

1. node.appendChild(child)

node.appendChild() 方法將一個節點添加到指定父節點的子節點串列末尾，類似于 CSS 里面的 after偽元素，

2. node.insertBefore(child, 指定元素)

node.insertBefore() 方法法將一個節點添加到父節點的指定子節點前面，類似于 CSS 里面的 before偽元素，

5.5 洗掉節點

node.removeChild(child)

node.removeChild() 方法法從 DOM 中洗掉一個子節點，回傳洗掉的節點，

5.6 復制節點（克隆節點）

node.cloneNode()

node.cloneNode() 方法回傳呼叫該方法的一個副本，也稱為克隆節點/拷貝節點

注意：

1. 如果括號引數為慷訓者為 false ，則是淺拷貝，即只克隆復制節點本身，不克隆里面的子節點，

2. 如果括號引數為 true ，則是深度拷貝，會復制節點本身以及里面所有的子節點，

6. DOM 重點核心

關于dom操作，我們主要針對于元素的操作，主要有創建、增、刪、改、查、屬性操作、事件操作，

6.1 創建

1. document.write

2. innerHTML

3. createElement

6.2 增

1. appendChild

2. insertBefore

6.3 刪

1. removeChild

6.4 改

主要修改dom的元素屬性，dom元素的內容、屬性, 表單的值等

1. 修改元素屬性： src、href、title等

2. 修改普通元素內容： innerHTML 、innerText

3. 修改表單元素： value、type、disabled等

4. 修改元素樣式： style、className

6.5 查

主要獲取查詢dom的元素

1. DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推薦

2. H5提供的新方法： querySelector、querySelectorAll 提倡

3. 利用節點操作獲取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

6.6 屬性操作

主要針對于自定義屬性

1. setAttribute：設定dom的屬性值

2. getAttribute：得到dom的屬性值

3. removeAttribute：移除屬性

6.7 操作事件

給元素注冊事件， 采取 事件源.事件型別 = 事件處理程式

滑鼠事件	觸發條件
onclick	滑鼠點擊左鍵觸發
onmouseover	滑鼠經過觸發
onmouseout	滑鼠離開觸發
onfocus	獲得滑鼠焦點觸發
onblur	失去滑鼠焦點觸發
onmousemove	滑鼠移動觸發
onmouseup	滑鼠彈起觸發
onmousedown	滑鼠按下觸發

事件高級

1. 注冊事件

1.1 注冊事件概述

給元素添加事件，稱為注冊事件或者系結事件，

注冊事件有兩種方式：傳統方式和方法監聽注冊方式

1.2 addEventListener 事件監聽方式

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener() 方法將指定的監聽器注冊到 eventTarget（目標物件）上，當該物件觸發指定的事件時，就會執行事件處理函式，

• type：事件型別字串，比如 click 、mouseover ，注意這里不要帶 on
• listener：事件處理函式，事件發生時，會呼叫該監聽函式
• useCapture：可選引數，是一個布林值，默認是 false，

2. 洗掉事件（解綁事件）

2.1 洗掉事件的方式

1. 傳統注冊方式

eventTarget.onclick = null

2. 方法監聽注冊方式

eventTarget.removeEventListener(type, listene（r[, useCapture])

3. DOM事件流

事件流描述的是從頁面中接收事件的順序，

事件發生時會在元素節點之間按照特定的順序傳播，這個傳播程序即 DOM 事件流，

DOM 事件流分為3個階段：

1. 捕獲階段

2. 當前目標階段

3. 冒泡階段

比如我們給一個div 注冊了點擊事件：

• 事件冒泡： IE 最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點的程序，
• 事件捕獲： 網景最早提出，由 DOM 最頂層節點開始，然后逐級向下傳播到到最具體的元素接收的程序，

注意：

1. JS 代碼中只能執行捕獲或者冒泡其中的一個階段，

2. onclick 和 attachEvent 只能得到冒泡階段，

3. addEventListener(type, listener[, useCapture]) 第三個引數如果是 true，表示在事件捕獲階段呼叫事件處理程式；如果是 false（不寫默認就是false），表示在事件冒泡階段呼叫事件處理程式，

4. 實際開發中我們很少使用事件捕獲，我們更關注事件冒泡，

5. 有些事件是沒有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

4. 事件物件

4.1 什么是事件物件

eventTargt.onclick = function(event) {}
eventTargt.addEvenetListener('click', function(event) {})
// 這個 event 就是事件物件，可以寫成 e 或 evt
// 這個 event 是個形參，系統幫我們設定為事件物件，不需要傳遞實參過去，
// 當我們注冊事件時， event 物件就會被系統自動創建，并依次傳遞給事件監聽器（事件處理函式），

官方解釋：event 物件代表事件的狀態，比如鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態， 簡單理解：事件發生后，跟事件相關的一系列資訊資料的集合都放到這個物件里面，這個物件就是事件物件 event，它有很多屬性和方法，

比如：

1. 誰系結了這個事件，

2. 滑鼠觸發事件的話，會得到滑鼠的相關資訊，如滑鼠位置，

3. 鍵盤觸發事件的話，會得到鍵盤的相關資訊，如按了哪個鍵，

4.2 事件物件的常見屬性和方法

e.target 和 this 的區別：

e.target 是事件觸發的元素，

this 是事件系結的元素， 這個函式的呼叫者（系結這個事件的元素）

事件物件屬性方法	說明
e.target	回傳觸發事件的物件
e.type	回傳事件的型別 比如 click mouseover 不帶on
e.preventDefault()	該方法 阻止默認事件（默認行為）比如不讓鏈接跳轉
e.stopPropagation()	阻止冒泡

5. 阻止事件冒泡

5.1 阻止事件冒泡

事件冒泡：開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節點，

利用事件物件里面的 stopPropagation()方法

e.stopPropagation()

6. 事件委托（代理、委派）

事件委托

事件委托也稱為事件代理， 在 jQuery 里面稱為事件委派，

事件委托的原理

不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然后利用冒泡原理影響設定每個子節點，

事件委托的作用

我們只操作了一次 DOM，提高了程式的性能，

7. 常見的滑鼠事件

7.1 常見的滑鼠事件

1. 禁止滑鼠右鍵選單

contextmenu 主要控制應該何時顯示背景關系選單，主要用于程式員取消默認的背景關系選單

document.addEventListener('contextmenu', function(e){
    e.preventDefault()
})

2. 禁止滑鼠選中（selectstart 開始選中）

document.addEventListener('selectstart', function(e){
    e.preventDefault()
})

7.2 滑鼠事件物件

event 物件代表事件的狀態，跟事件相關的一系列資訊的集合，現階段我們主要是用滑鼠事件物件 MouseEvent 和鍵盤事件物件 KeyboardEvent，

滑鼠事件物件	說明
e.clientX	回傳滑鼠相對于瀏覽器視窗可視區的 X 坐標
e.clientY	回傳滑鼠相對于瀏覽器視窗可視區的 Y 坐標
e.pageX	回傳滑鼠相對于檔案頁面的 X 坐標 IE9+支持
e.pageY	回傳滑鼠相對于檔案頁面的 Y 坐標 IE9+支持
e.screenX	回傳滑鼠相對于電腦螢屏的 X 坐標
e.screenY	回傳滑鼠相對于電腦螢屏的 Y 坐標

8. 常用的鍵盤事件

8.1 常用鍵盤事件

鍵盤事件	觸發條件
onkeyup	某個鍵盤按鍵被松開時觸發
onkeydown	某個鍵盤按鍵被按下時觸發
onkeypress	某個鍵盤按鍵被按下時觸發 不識別功能鍵 比如 ctrl 等

注意：

1. 如果使用addEventListener 不需要加 on

2. onkeypress 和前面2個的區別是，它不識別功能鍵，比如左右箭頭，shift 等，

3. 三個事件的執行順序是： keydown -- keypress --- keyup

8.2 鍵盤事件物件

key

只讀屬性 e.key 回傳用戶按下的物理按鍵的值，