以下內(nèi)容總結(jié)自《JS高級(jí)程序設(shè)計(jì)》第三版
DOM作為API已經(jīng)很完善了，但是為了實(shí)現(xiàn)更多功能，仍然會(huì)有一些屬于瀏覽器的專屬擴(kuò)展。
在經(jīng)過(guò)時(shí)間的檢驗(yàn)后，W3C將一些專有擴(kuò)展標(biāo)準(zhǔn)化并寫入規(guī)范中绘搞。
而對(duì)DOM的擴(kuò)展標(biāo)準(zhǔn)化主要有兩個(gè)方面
1. Selectors API (選擇符API)
2. HTML5
此外，還有一個(gè)次要的規(guī)范
Element Traversal (元素遍歷)
下面就來(lái)說(shuō)說(shuō)這幾個(gè)東西傅物。
一夯辖、 選擇符API
選擇符API有兩個(gè)核心的方法 :quertSelector()和querySelectorAll()
1. querySelector() 方法
參數(shù)： 1. CSS選擇符
返回值： 返回匹配到的第一個(gè)元素。找不到返回null
例：
// 取得body元素
let body = documnet.querySelector('body')
// 取得id為'myDiv'的元素
let div = documnet.querySelector('#mydiv')
// 取得class為'selected'的第一個(gè)元素
let div = documnet.querySelector('.selected')
// 取得class為'button'的第一個(gè)圖像元素
let div = documnet.querySelector('img')
在上面我們使用的是document對(duì)象董饰，當(dāng)然我們也可以使用Element類型的對(duì)象蒿褂，只是查找范圍縮小到了element對(duì)象之內(nèi)。
2卒暂、querySelectorAll() 方法
參數(shù)： 1. CSS選擇符
返回值： 匹配元素集合啄栓，NodeList類型。匹配不到時(shí)也祠，NodeList是空的昙楚。
和querySelector相比參數(shù)相同，querySelector只能返回匹配到的第一個(gè)诈嘿，querySelectorAll能返回所有匹配的元素堪旧。
二、元素遍歷
元素遍歷為DOM添加了5個(gè)屬性
- childElementCount: 返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)
- firstElementChild: 指向第一個(gè)子元素永淌，firstChild的元素版
- lastElementChild: 指向最后一個(gè)子元素崎场，lastChild的元素版
- previousElementSibling: 指向前一個(gè)同輩份的元素佩耳，previousSibling的元素版
- nextElementSibling: 指向后一個(gè)同輩份的元素遂蛀，nextSibling的元素版
這五個(gè)屬性，是為了彌補(bǔ)不同瀏覽器之間的差異而添加的干厚。
三李滴、HTML5
HTML5是HTML的升級(jí)版，來(lái)看看對(duì)比吧
HTML： 主要定義標(biāo)記蛮瞄，與JavaScript相關(guān)的內(nèi)容交給DOM規(guī)范去定義所坯。
HTML5：圍繞何如使用新增標(biāo)記定義了大量的JavaScript的API。
1挂捅、與類相關(guān)的擴(kuò)充
此類擴(kuò)充能夠?yàn)樵靥砑訕邮胶筒僮髟亍?/p>
1.1 getElementsByCLassName()
參數(shù)： 1. 包含一個(gè)或多個(gè)類名的字符串
返回值：匹配到的元素集合芹助，NodeList類型
1.2 classList
classList是新增的一個(gè)操作類名的屬性
來(lái)看看和className 的區(qū)別
className：
返回值：字符串
作用： 添加、刪除和替換類名。
classList：
返回值：類名集合状土，DomTokenList類型
作用： 同className
classList有四個(gè)方法來(lái)操作類名集合
- add(value): 將給定的字符串添加到列表中无蜂。如果值已存在，就不添加再扭。
- contains(value)：表示列表中是否存在給定的值碎连，如果存在返回true减余，沒有返回false
- remove(value)：從列表中刪除指定的字符串
- remove(value)：如果列表中已經(jīng)存在給定的值，刪除酣倾；如果不存在，添加谤专。
classList比className操作更加簡(jiǎn)單躁锡，推薦使用。
2毒租、焦點(diǎn)管理
HTML5添加了輔助管理DOM焦點(diǎn)的功能稚铣，分別是一個(gè)屬性和一個(gè)方法。
- 屬性 document.activeElement
返回值：當(dāng)前獲得焦點(diǎn)的元素墅垮。
元素獲得焦點(diǎn)的方式有頁(yè)面加載惕医、用戶輸入和在代碼中調(diào)用focus()方法。
- 方法 element.hasFocus()
參數(shù)：無(wú)
返回值： 檢測(cè)元素是否獲得焦點(diǎn)算色。
3抬伺、HTMLDocument的變化
HTML5擴(kuò)展了HTMLDocument屬性，增加了新的功能灾梦。
3.1 redayState屬性
可能的值：
- loading：正在加載文檔峡钓。
- complete：已經(jīng)加載完文檔。
使用場(chǎng)景：
代替onload事件若河。
3.2 兼容模式（compatMode屬性）
該屬性能夠區(qū)分渲染頁(yè)面的模式是標(biāo)準(zhǔn)的還是混雜的
返回值：
1. CSS1Compat ：標(biāo)準(zhǔn)模式
2. BackCompat: 混雜模式
3.4 字符集屬性
- charset屬性
默認(rèn)值：UTF-16
我們可以直接修改這個(gè)屬性來(lái)改變文檔字符集
document.charset = 'UTF-8'
還可以通過(guò)另外兩種方法來(lái)修改字符集
設(shè)置<meta>元素
設(shè)置響應(yīng)頭部
- defaultCharset 屬性
表示根據(jù)默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置能岩，當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么。如果文檔沒有使用默認(rèn)的字符集萧福，那charset和defaultCharset屬性的值可能會(huì)不一樣拉鹃。
3.5 自定義屬性數(shù)據(jù)
我們可以為元素添加非標(biāo)準(zhǔn)的屬性，也就是自己定義屬性鲫忍。
注意： 自定義屬性需要添加前綴 data-
- 應(yīng)用場(chǎng)景：
需要通過(guò)元素存取數(shù)據(jù)時(shí)使用膏燕。
3.6 插入標(biāo)記
通過(guò)插入標(biāo)記，我們能夠簡(jiǎn)化一堆DOM節(jié)點(diǎn)再按照順序插入到頁(yè)面的這種特別麻煩的操作悟民。
3.6.1 innerHTML屬性
讀模式：返回調(diào)用元素的所有子節(jié)點(diǎn)（包括元素坝辫、注釋和文本節(jié)點(diǎn)對(duì)應(yīng)的HTML標(biāo)記）
寫模式：根據(jù)傳入的值（字符串）創(chuàng)建新的DOM樹，替換調(diào)用元素的所有子節(jié)點(diǎn)射亏。
- 注意
- 不同瀏覽器的innerHTMl返回值會(huì)不同近忙。
IE和Opera將所有標(biāo)簽轉(zhuǎn)成大寫形式竭业，其他瀏覽器不會(huì)干這事- innerHTMl寫模式不會(huì)執(zhí)行寫入的<script>腳本。(IE8或更早版本可以)
3.6.2 outerHTML屬性
讀模式： 返回調(diào)用它的元素和所有子節(jié)點(diǎn)的HTML標(biāo)簽及舍。
寫模式： 根據(jù)指定的HTML字符串創(chuàng)建新的DOM子樹永品，然后替換調(diào)用元素。
和innerHTMl的區(qū)別击纬，就是把調(diào)用元素也計(jì)算在內(nèi)了鼎姐。
3.6.3 insertAdjacentHTML() 方法
這個(gè)方法也可以插入標(biāo)記。
參數(shù)：
- 指定值更振。
beforebegin：在當(dāng)前元素之前插入一個(gè)緊鄰的同輩元素
afterbegin：在當(dāng)前元素之下插入一個(gè)新的子元素或在第一個(gè)子元素之前插入新的元素
beforeend：在當(dāng)前元素之下插入一個(gè)新的子元素或在最后的子元素之后插入新的元素
afterend：在當(dāng)前元素之后插入一個(gè)緊鄰的同輩元素
3.6.4 內(nèi)存和性能問題
- 在刪除帶有事件處理程序或引用了其他JavaScript對(duì)象子樹時(shí)炕桨，可能會(huì)導(dǎo)致內(nèi)存占用問題。所以刪除前最好手動(dòng)清空所有的事件處理沖和和JavaScript對(duì)象屬性肯腕。
- 合理使用innerHtml献宫，一次性傳入多個(gè)標(biāo)簽代替多次傳入標(biāo)簽。
3.7 scrollIntoView() 方法
這個(gè)方法用來(lái)控制頁(yè)面滾動(dòng)实撒。所有的HTML元素都可以調(diào)用
參數(shù)：1. true或不傳姊途，窗口滾動(dòng)到元素頂部和視口頂部平齊的位置
false，調(diào)用元素會(huì)盡可能的出現(xiàn)在視口中知态。
4 專有擴(kuò)展
專有擴(kuò)展雖然沒有加入到規(guī)范中捷兰，但還是有幾個(gè)比較常用的。
4.1 children屬性
該屬性返回調(diào)用元素的元素子節(jié)點(diǎn)负敏，而childNode屬性返回所有子節(jié)點(diǎn)贡茅。
4.2 contains() 方法
查看某個(gè)節(jié)點(diǎn)是否是另外一個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)
參數(shù)：要檢測(cè)的子節(jié)點(diǎn)
返回值： ture|false
另外還有一個(gè)compareDocumentPosition() 方法也可以確定節(jié)點(diǎn)關(guān)系。
參數(shù)：要檢測(cè)的節(jié)點(diǎn)
返回值：1：無(wú)關(guān) 2：居前 :4：居后 8：包含 16：被包含
4.3 插入文本
4.3.1 innerText屬性
通過(guò)該屬性能夠操作元素中包含的所有文本內(nèi)容其做。
讀模式： 返回個(gè)字符串顶考，每個(gè)文本節(jié)點(diǎn)中的文字通過(guò)換行的方式連接。
寫模式： 傳入字符串即可妖泄。會(huì)替換調(diào)用元素的所有子元素驹沿。
應(yīng)用：
大家可以通過(guò)document.body.innerText來(lái)查看當(dāng)前頁(yè)面的body內(nèi)的所有文本元素。textContent
和innerText作用類似蹈胡，但textContent會(huì)返回行內(nèi)樣式和腳本代碼渊季，innerText只會(huì)返回文本內(nèi)容。
4.3.1 outerText屬性
除了作用范圍擴(kuò)大到了調(diào)用元素之外审残，和innerText沒有區(qū)別
