[TOC]
---
### 一、 什么是DOM 操作
DOM( document Object Model) ,是針對(duì)HTML 和 XML 的API, 可以理解為DOM 就是一些列功能集合。
### 二、什么是DOM 樹
1. 當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對(duì)象的樹：
### 三、DOM 操作
#### 1. DOM 查詢
```JavaScript
document.getElementById() // 通過id查找元素
document.getElementsByTagName() // 通過標(biāo)簽查找元素，返回類數(shù)組
document.getElementsByClassName() // 通過class查找元素，返回類數(shù)組
document.querySelector() // 通過css選擇器查找元素，返回一個(gè)選中的元素
document.querySelectorAll(); // 通過css選擇器查找元素，返回類數(shù)組
```
#### 2. DOM 屬性操作
```JavaScript
ele.attributes // 獲取ele元素的所有屬性 返回類數(shù)組
ele.getAttribute("屬性名") // 獲取ele元素某個(gè)屬性值
ele.setAttribute("屬性名","屬性值") // 為ele元素添加某個(gè)屬性以及值
ele.removeAttribute("屬性名") // 刪除ele元素某個(gè)屬性
// 比如我們想獲取元素的屬性 還可以
ele.class
ele.style
```
#### 3. DOM 文本節(jié)點(diǎn)查詢及操作
```JavaScript
ele.childNodes //獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)（包括元素節(jié)點(diǎn)和文本節(jié)點(diǎn)）。返回類數(shù)組
ele.parentNode //只讀，獲取父元素節(jié)點(diǎn) 沒有兼容性問題
ele.nodeType // 返回文本節(jié)點(diǎn)值3(文本代碼值)
ele.nodeName // 返回文本節(jié)點(diǎn)名稱 #text
ele.nodeValue //返回節(jié)點(diǎn)所包含的文本
ele.appendData(text) //將text 添加到節(jié)點(diǎn)的末尾。
ele.deleteData(offset, count) //從offset 指定的位置開始刪除count 個(gè)字符。
ele.insertData(offset, text) //在offset 指定的位置插入text。
ele.replaceData(offset, count, text) //用text 替換從offset 指定的位置開始到offset + count 為止處的文本。
ele.splitText(offset) //從offset 指定的位置將當(dāng)前文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)。
ele.substringData(offset, count) //提取從offset 指定的位置開始到offset+count 為止
```
#### 4. DOM 獲取祖先，同胞，子元素
```JavaScript
ele.parentElement // 獲取父元素
ele.children // 獲取子元素返回類數(shù)組
ele.firstElementChild // 獲取ele元素的第一個(gè)子元素 (不包含空格)
ele.firstChild // 獲取ele元素的一個(gè)子元素 (包含空格)
ele.lastElementChild // 獲取ele元素的最后一個(gè)子元素 (不包含空格)
ele.nextElementSibling // 獲取ele元素的后一個(gè)兄弟元素 (不包含空格)
ele.previousElementSibling // 獲取ele元素的上一個(gè)兄弟元素 (不包含空格)
```
#### 5. DOM 的增加 刪除 替換 插入
```JavaScript
// 刪除替換
ele.removeChild(el) // 刪除ele元素中的子元素el
ele.replaceChild(el1,el2) // 在ele子元素內(nèi)將el1替換為el2
ele.insertBefore(newEle,oldChildEle) // 將newEle 元素 插入到ele元素內(nèi)oldChildEle元素前邊
ele.appendChild(el) // 將el元素插入到ele元素內(nèi)的最后邊
ele.cloneNode(true) // 為true時(shí)指示被復(fù)制的節(jié)點(diǎn)是否包括原節(jié)點(diǎn)的所有屬性和子節(jié)點(diǎn)
// 創(chuàng)建元素和節(jié)點(diǎn)
document.createElement("元素名稱") // 創(chuàng)建一個(gè)新元素
document.createTextNode("文本") // 創(chuàng)建一個(gè)新文本節(jié)點(diǎn)
```
#### 6. DOM 獲取元素信息
```JavaScript
ele.clientWidth // 獲取元素的可視寬度 padding + content
ele.clientHeight // 獲取元素的可視高度 padding + content
ele.offsetWidth // 獲取元素的 border+padding+content 寬度
ele.offsetHeight // 獲取元素的 border+padding+content 高度
ele.offsetLeft // 獲取元素 position/relative 左定位+ margin（左）
ele.offsetTop // 獲取元素 position/relative 左定位+ margin（上）
ele.clientTop // 獲取元素的border 上邊寬度
ele.clientLeft // 獲取元素的border 左邊寬度
ele.scrollHeight //當(dāng)元素內(nèi)部的內(nèi)容超出其寬度和高度的時(shí)候，元素內(nèi)部?jī)?nèi)容的實(shí)際高度
ele.scrollWidth //當(dāng)元素內(nèi)部的內(nèi)容超出其寬度和高度的時(shí)候，元素內(nèi)部?jī)?nèi)容的實(shí)際寬度
ele.scrollTop // （可讀寫）指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候，元素被卷起的高度
ele.scrollLeft // （可讀寫）指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候，元素被卷起的寬度
ele.getBoundingClientRect() // 會(huì)返回一個(gè)對(duì)象，包含元素的上下左右距離和寬高
```
