JavaScript DOM初學筆記

阿新 • • 發佈：2020-10-12

1. DOM簡介

1. 1 什麼是DOM

文件物件模型（Document Object Model，簡稱 DOM），是 W3C組織推薦的處理可擴充套件標記語言（HTML 或者XML）的標準程式設計介面。

1.2 DOM樹

文件：一個頁面就是一個文件，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 事件三要素

1.事件源（誰）

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

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

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-開頭做為屬性名並且賦值
比如

（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效率對比