1. DOM簡介

1. 1 什么是DOM

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

1.2 DOM樹

HTML DOM Node Tree

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

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

2. 獲取元素

2.1 根據ID獲取

document.getElementById('id');

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

2.2 根據標簽名獲取

document.getElementsByTagName('標簽名');

得到的是一個物件的集合（偽陣列）

element.getElementsByTagName('標簽名');

父元素必須是單個物件(必須指明是哪一個元素物件)，獲取的時候不包括父元素自己

2.3 根據HTML5 新增的方法獲取

document.getElementsByClassName(‘類名’)；// 根據類名回傳元素物件集合

document.querySelector('選擇器');        // 根據指定選擇器回傳第一個元素物件

document.querySelectorAll('選擇器');     // 根據指定選擇器回傳

querySelector和querySelectorAll里面的選擇器需要加符號

比如：document.querySelector('#nav');

2.4 獲取特殊元素（body，html）

doucumnet.body  // 回傳body元素物件

document.documentElement  // 回傳html元素物件

3. 事件基礎

3.1 事件三要素

事件源（誰）
事件型別（什么事件）
事件處理程式（做啥）

3.2 滑鼠事件

4. 操作元素

4.1 改變元素內容

element.innerText

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

element.innerHTML

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

4.2 常用元素的屬性操作

1. innerText、innerHTML 改變元素內容

2. src、href

3. id、alt、title

4.3 表單元素的屬性操作

type、value、checked、selected、disabled

4.4 樣式屬性操作

element.style        行內樣式操作

element.className    類名樣式操作

JS 里面的樣式采取駝峰命名法比如 fontSize、 backgroundColor
JS 修改 style 樣式操作，產生的是行內樣式，CSS 權重比較高
className 會直接更改元素的類名，會覆寫原先的類名

4.5 總結

4.6 自定義屬性的操作

4.6.1 獲取屬性值

element.屬性            // 獲取內置屬性值（元素本身自帶的屬性）

element.getAttribute('屬性');       // 主要獲得自定義的屬性（標準），程式員自定義的屬性

4.6.2 設定屬性值

element.屬性 = '值'         // 設定內置屬性值

element.setAttribute('屬性', '值');         // 主要設定自定義的屬性（標準）

4.6.3 移除屬性

element.removeAttribute('屬性');          // 自定義的屬性

4.7 H5自定義屬性

4.7.1 設定屬性

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

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

（2）使用 JS 設定

element.setAttribute(‘data-index’, 2)

4.7.2 獲取屬性

（1）兼容性獲取

element.getAttribute(‘data-index’);

（2）H5新增

element.dataset.index

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

5. 節點操作

5.1 節點概述

元素節點 nodeType 為 1
屬性節點 nodeType 為 2
文本節點 nodeType 為 3 （文本節點包含文字、空格、換行等）
我們在實際開發中，節點操作主要操作的是元素節點

5.2 節點層級

5.2.1 父級節點

node.parentNode

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

5.2.2 子節點

1. parentNode.childNodes（標準）     // 不提倡

回傳包含指定節點的子節點的集合，該集合為即時更新的集合，包含了所有的子節點，包括元素節點，文本節點等

2. parentNode.children（非標準）     // 各個瀏覽器支持

只讀屬性，回傳所有的子元素節點，它只回傳子元素節點，其余節點不回傳

第一個子元素節點：parentNode.chilren[0]

最后一個子元素節點：parentNode.chilren[parentNode.chilren.length - 1]

3. parentNode.firstChild

回傳第一個子節點，找不到則回傳null，包含所有的節點

4. parentNode.lastChild

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

5. parentNode.firstElementChild        // IE9 以上才支持

回傳第一個子元素節點，找不到則回傳null

6. parentNode.lastElementChild        // IE9 以上才支持

回傳最后一個子元素節點，找不到則回傳null

5.2.3 兄弟節點

1. node.nextSibling

回傳當前元素的下一個兄弟節點，找不到則回傳null，包含所有的節點

2. node.previousSibling

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

3. node.nextElementSibling              // IE9 以上才支持

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

4. node.previousElementSibling          // IE9 以上才支持

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

5.3 創建節點

document.createElement('tagName')

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

5.4 添加節點

1. node.appendChild(child)

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

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

將一個節點添加到父節點的指定子節點前面，類似于 CSS 里面的 before 偽元素

5.5 洗掉節點

node.removeChild(child)

從 DOM 中洗掉一個子節點，回傳洗掉的節點

5.6 克隆節點

node.cloneNode()

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

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

5.7 三種動態創建元素區別

document.write()
element.innerHTML
document.createElement()

document.write 是直接將內容寫入頁面的內容流，但是檔案流執行完畢，會導致頁面全部重繪
innerHTML 是將內容寫入某個 DOM 節點，不會導致頁面全部重繪
innerHTML 創建多個元素效率更高（不要拼接字串，采取陣列形式拼接），結構稍微復雜
createElement() 創建多個元素效率稍低一點點，但是結構更清晰

詳情：
[三種創建元素的方式]
[innerHTML和createElement效率對比]

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

6.1 注冊事件概述

6.2 addEventListener

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

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

6.3 attachEvent

eventTarget.attachEvent(eventNameWithOn, callback);                // IE8 及早期版本支持

eventNameWithOn：事件型別字串，比如 onclick 、onmouseover ，這里要帶 on
callback：事件處理函式，當目標觸發事件時回呼函式被呼叫

6.4 注冊事件兼容性解決方案

function addEventListener(element, eventName, fn) {
    // 判斷當前瀏覽器是否支持 addEventListener 方法 
    if (element.addEventListener) {
        element.addEventListener(eventName, fn); // 第三個引數 默認是false 
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
    } else {
        // 相當于 element.onclick = fn; 
        element['on' + eventName] = fn;
    }

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

7.1 洗掉事件的方式

（1）傳統注冊方式

eventTarget.onclick = null;

（2）方法監聽注冊方式

eventTarget.removeEventListener(type, listener[, useCapture]);

eventTarget.detachEvent(eventNameWithOn, callback);

7.2 洗掉事件兼容性解決方案

function removeEventListener(element, eventName, fn) {
    // 判斷當前瀏覽器是否支持 removeEventListener 方法 
    if (element.removeEventListener) {
        element.removeEventListener(eventName, fn); // 第三個引數 默認是false 
    } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
    } else {
        element['on' + eventName] = null;
    }

8. DOM事件流

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

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

DOM 事件流分為3個階段：

捕獲階段
當前目標階段
冒泡階段

注意：

JS 代碼中只能執行捕獲或者冒泡其中的一個階段
onclick和attachEvent只能得到冒泡階段
addEventListener(type, listener[, useCapture])第三個引數如果是true，表示在事件捕獲階段調用事件處理程式；

如果是false（不寫默認就是false），表示在事件冒泡階段呼叫事件處理程式
實際開發中我們很少使用事件捕獲，我們更關注事件冒泡
有些事件是沒有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有時候會帶來麻煩，有時候又會幫助很巧妙的做某些事件

9. 事件物件

9.1 什么是事件物件

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {});
  // 這個 event 就是事件物件，我們還喜歡的寫成 e 或者 evt

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

9.2 事件物件的使用語法

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {});

event是個形參，系統幫我們設定為事件物件，不需要傳遞實參過去
當我們注冊事件時，event物件就會被系統自動創建，并依次傳遞給事件監聽器（事件處理函式）

9.3 事件物件的兼容性方案

e = e || window.event;

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

e.target 和 this 的區別

10. 阻止事件冒泡

10.1 阻止事件冒泡的兩種方式

標準寫法：利用事件物件里面的stopPropagation()方法
```
e.stopPropagation();
```
非標準寫法：IE 6-8 利用事件物件cancelBubble屬性
```
e.cancelBubble = true;
```

10.2 阻止事件冒泡的兼容性解決方案

if (e && e.stopPropagation) {
    e.stopPropagation();
} else {
    window.event.cancelBubble = true;
}

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

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

原理：

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

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
// 給 ul 注冊點擊事件，然后利用事件物件的 target 來找到當前點擊的 li，因為點擊 li，事件會冒泡到 ul 上， ul 有注冊事件，就會觸發事件監聽器

作用：

只操作了一次 DOM ，提高了性能

12. 常用的滑鼠事件

12.1 滑鼠事件

禁止滑鼠右鍵選單：

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

禁止滑鼠選中：

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

12.2 滑鼠事件物件

13. 常用的鍵盤事件

13.1 鍵盤事件

注意給檔案document添加鍵盤事件

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

13.2 鍵盤事件物件

onkeydown和onkeyup不區分字母大小寫，onkeypress區分字母大小寫

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/184943.html

標籤：其他

上一篇：jquery動態輸入

下一篇：模塊二：ES新特性與TypeScript、JS性能優化

JavaScript DOM初學筆記