關(guān)于DOM的內(nèi)容實(shí)在是太豐富了，前面我們簡單的介紹了DOM中關(guān)于DOM特性和內(nèi)容還有DOM節(jié)點(diǎn)相關(guān)的知識點(diǎn)碘勉。其實(shí)主要的就是關(guān)于DOM1級的主要概念：其將HTML或XML形象的看成是一個(gè)層次化的節(jié)點(diǎn)樹，可以通過JavaScript操作這個(gè)節(jié)點(diǎn)樹笑陈，進(jìn)而改變其外觀和結(jié)構(gòu)甩恼。接下來進(jìn)一步拓展一下DOM相關(guān)的內(nèi)容。
一拴疤、選擇符拓展
以下的方法可以通過Document和Element類型的實(shí)例調(diào)用他們。
（1）document.querySelector()独泞，level1呐矾，該方法接受一個(gè)CSS選擇符，返回該模式匹配的第一個(gè)元素懦砂。如果沒有則返回null蜒犯。如果傳入不被支持的CSS選擇符則會報(bào)錯(cuò)。
（2）document.querySelectorAll()荞膘，level1罚随，該方法和上面方法接受的參數(shù)是一樣的，但是返回的不僅是一個(gè)元素羽资，返回的是一個(gè)NodeList實(shí)例淘菩。具體來說，返回的值是帶有所有屬性和方法的NodeList屠升。返回的僅僅是NodeList的快照潮改，并不是動(dòng)態(tài)查詢的，這樣避免了常見的性能問題腹暖。
（3）matchesSelector()汇在，level2，該方法是level2級別的方法脏答，是為Element類型新增的一個(gè)方法糕殉。這個(gè)方法接受一個(gè)參數(shù)（CSS選擇符），如果調(diào)用元素和該選擇符匹配則返回TRUE殖告，否則返回FALSE阿蝶。注意，該方法在很多瀏覽器上并未實(shí)現(xiàn)黄绩，注意使用羡洁。
二、元素遍歷拓展
之前關(guān)于獲得某個(gè)元素的子節(jié)點(diǎn)提供了一些方法宝与，例如firstChild焚廊，lastChild，childNodes习劫。關(guān)于節(jié)點(diǎn)之間的空格在IE9之前是不會當(dāng)做文本節(jié)點(diǎn)返回的咆瘟，但是在其他的瀏覽器中會當(dāng)做一個(gè)文本節(jié)點(diǎn)返回。這樣就導(dǎo)致了一些兼容性問題诽里。接下來提供了一些新的方法可以使用袒餐，這樣可以避免空白文本節(jié)點(diǎn)：
（1）childElementCount，返回子元素的個(gè)數(shù)谤狡，不包括文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)灸眼。
（2）firstElementChild，指向的是第一個(gè)子元素墓懂，是firstChild的元素版焰宣。
（3）lastElementChild，指向的是最后一個(gè)子元素捕仔，是lastChild的元素版匕积。
（4）previousElementSibiling，指向前一個(gè)同輩元素榜跌，是previousSibling的元素版闪唆。
（5）nextElementSibling，指向是下一個(gè)同輩元素钓葫，是nextSibling的元素版悄蕾。
三、HTML5關(guān)于DOM的拓展
（1）getElementsByClassName()础浮，該方法可以通過所有的HTML元素或者document對象進(jìn)行調(diào)用帆调。該方法接受一個(gè)參數(shù)，即一個(gè)包含一個(gè)或者多個(gè)類名的字符串豆同，返回帶有指定類的所有NodeList贷帮，傳入多個(gè)類時(shí)，順序不重要诱告。
（2）classList屬性撵枢，所有元素都具有這個(gè)屬性，這個(gè)也是一個(gè)類數(shù)組精居，具有l(wèi)ength屬性可以通過item()方法進(jìn)行訪問锄禽。此外該屬性還有以下方法：（支持該屬性的瀏覽器貌似有FF3.6和chrome）
add(value) :將給定的value添加到列表中，如果存在則不添加靴姿。
contains(value):表示列表中是否存在value沃但，如果存在則返回TRUE，否則返回FALSE佛吓。
remove(value):從列表中刪除給定的value 宵晚。
toggle(value): 如果列表中有value則刪除垂攘，如果沒有的話則添加。
------華麗的分割線-------
四淤刃、焦點(diǎn)管理
（1）document.activeElement屬性晒他，這個(gè)屬性始終會引用DOM中當(dāng)前獲得了焦點(diǎn)的元素。默認(rèn)情況下逸贾，當(dāng)文檔加載完畢后陨仅，該屬性中保存的是document.body元素。在加載期間其值為null铝侵。
（2）document.hasFocus()方法灼伤，該方法用來確定文檔或者元素是否獲得了焦點(diǎn)。通過這個(gè)方法可以判斷用戶是否正在和頁面進(jìn)行交互操作咪鲜。
五狐赡、HTMLDocument新變化
（1）document.readyState屬性：該屬性可以用來判斷文檔是否加載完成，其有兩個(gè)值疟丙。第一猾警，loading表示正在加載文檔。第二隆敢，complete表示已經(jīng)加載完成文檔发皿。
（2）document.compatMode屬性：可以用來檢測頁面的模式是標(biāo)準(zhǔn)模式還是混雜模式，在標(biāo)準(zhǔn)模式下該屬性的值為'CSS1Compat'拂蝎，在混雜模式下該屬性的值為'BackCompat'穴墅。
（3）document.head屬性：該屬性是對文檔中<head>元素的引用。因?yàn)閷?shí)現(xiàn)的瀏覽器并不多可以通過兼容寫法：document.head || document.getElementsByTagName('head')[0]温自。
六玄货、自定義數(shù)據(jù)的屬性
我們知道在HTML5中可以為元素添加自定義屬性，其格式為data-name的格式悼泌，name是自己進(jìn)行命名的松捉。
（1）element.dataset屬性：我們可以通過元素獲得dataset屬性，該屬性包括的是自定義屬性的一個(gè)鍵值對馆里，是一個(gè)DOMStringMap的實(shí)例隘世。例如：
var box = document.getElementById('id');
var appid = box.dataset.appid;//取得屬性為data-appid的值
box.dataset.appid = 12345; //設(shè)置自定義屬性data-appid的值。
七鸠踪、專有擴(kuò)展
（1）文檔模式：在IE8中引入這個(gè)概念表示頁面可以用什么級別的CSS丙者，可以用JavaScript的哪些API。要強(qiáng)制瀏覽器已某種模式進(jìn)行渲染营密，可以使用HTTP頭部信息X-UA-Compatible或者通過等價(jià)的meta頭部進(jìn)行設(shè)置械媒。
（2）children屬性：之前關(guān)于處理文本節(jié)點(diǎn)中的空白有差異，這里出現(xiàn)了children屬性，這個(gè)屬性也是HTMLCollection的實(shí)例纷捞。只包含元素中同樣還是元素的節(jié)點(diǎn)痢虹。
（3）contains()方法：該方法可以判斷某個(gè)節(jié)點(diǎn)是不是另一個(gè)節(jié)點(diǎn)的后代。IE是第一個(gè)引入該方法的主儡。調(diào)用該方法的應(yīng)該是祖先節(jié)點(diǎn)奖唯。接受的參數(shù)是檢測的后代節(jié)點(diǎn)。如果檢測到了返回TRUE否則返回FALSE缀辩。
