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

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()

1. document.write 是直接將內容寫入頁面的內容流，但是檔案流執行完畢，會導致頁面全部重繪

2. innerHTML 是將內容寫入某個 DOM 節點，不會導致頁面全部重繪

3. innerHTML 創建多個元素效率更高（不要拼接字串，采取陣列形式拼接），結構稍微復雜

4. createElement() 創建多個元素效率稍低一點點，但是結構更清晰

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

標籤：其他

上一篇：jquery影片滑入滑出

下一篇：jquery右下角彈出廣告