本章內(nèi)容
- 理解 Selectors API
- 使用 HTML5 DOM 擴(kuò)展
- 了解專(zhuān)有的 DOM 擴(kuò)展
對(duì) DOM 的兩個(gè)主要的擴(kuò)展是選擇符 API 和 HTML5。
11.1 選擇符 API
Selectors API Level 1 的核心是兩個(gè)方法：querySelector()和querySelectorAll()。
11.1.1 querySelecotor() 方法
該方法接收一個(gè) CSS 選擇符，返回與該模式匹配的第一個(gè)元素，如果沒(méi)有找到匹配的元素，返回null。
var myDiv = document.querySelector('#myDiv');
var img = document.body.querySelector('img.button');
通過(guò)Document類(lèi)型調(diào)用時(shí)，會(huì)在文檔元素的范圍內(nèi)查找匹配的元素。而通過(guò)Element類(lèi)型調(diào)用querySelector()方法時(shí)，只會(huì)在該元素后代元素的范圍內(nèi)查找匹配的元素。
querySelectorAll() 方法
這個(gè)方法返回的是一個(gè)NodeList的實(shí)例，實(shí)際上是帶有所有屬性和方法的NodeList。
11.1.3 matchesSelector() 方法
Selectors API Level 2 規(guī)范為Element類(lèi)型新增了一個(gè)方法matchesSelector()。這個(gè)方法接收一個(gè) CSS 選擇符，如果調(diào)用元素與該選擇符匹配，返回true；否則，返回false。
if (document.body.matchesSelector("body.page1")) {
//true
}
11.2 元素遍歷
過(guò)去，要跨瀏覽器遍歷某元素的所有子元素，需要這樣寫(xiě)。
var i;
var len;
var child = element.firstChild;
while(child != element.lastChild) {
if (child.nodeType == 1) { //檢查是不是元素
processChild(child);
}
child = child.nextSibling;
}
而使用 Element Traversal 新增的元素，代碼會(huì)更簡(jiǎn)潔。
var i;
var len;
var child = element.firstElementChild;
while(child != element.lastElementChild) {
processChild(child); //已知其是元素
child = child.nextElementSibling;
}
11.3 HTML5
11.3.1 與類(lèi)相關(guān)的擴(kuò)充
- getElementsByClassName() 方法
該方法接收一個(gè)參數(shù)，即一個(gè)包含一或多個(gè)類(lèi)名的字符串，返回帶有指定類(lèi)型的所有元素的NodeList。
var allCurrentUsernames = document.getElementsByClassName("username current");
- classList 屬性
//刪除類(lèi)
div.classList.remove('user');
//添加類(lèi)
div.classList.add('current');
//切換類(lèi)
div.classList.toggle('user');
//確定元素中是否包含類(lèi)
if(div.classList.contains('bd') && !div.classList.contains('disabled')) {
}
迭代類(lèi)名
for (var i =0,len=div.classList.length;i < len; i++) {
doSomething(div.classList[i]);
}
11.3.2 焦點(diǎn)管理
HTML5 也添加了輔助管理 DOM 焦點(diǎn)的功能。首先就是document.activeElement屬性，這個(gè)屬性始終會(huì)引用 DOM 中當(dāng)前獲得了焦點(diǎn)的元素。
var button = document.getElementById('myButton');
button.focus();
alert(document.activeElement === button); //true
默認(rèn)情況下，文檔剛加載完成時(shí)，document.activeElement中保存的是document.body元素的引用。文檔加載期間，document.activeElement的值為null。
另外新增了document.hasFocus()方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。
11.3.3 HTMLDocument 的變化
- readyState 屬性
屬性由兩個(gè)可能的值。
loading，正在加載文檔；
complete，已經(jīng)加載完文檔。
if (document.readyState == 'complete') {
//執(zhí)行操作
}
- 兼容模式
在標(biāo)準(zhǔn)模式下，document.compatMode的值等于CSS1Compat，而在混雜模式下，值等于BackCompat。 - head 屬性
新增了document.head屬性，引用文檔的<head>元素。
var head = document.head || document.getElementsByTagName('head')[0];
11.3.4 字符集屬性
charset屬性表示文檔中實(shí)際使用的字符集，也可以用來(lái)指定新字符集。默認(rèn)值為UTF-16。
alert(document.charset); //'UTF-16'
document.charset = 'UTF-8';
另一個(gè)屬性是defaultCharset，表示根據(jù)默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置，當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么。
11.3.5 自定義數(shù)據(jù)屬性
HTML5 規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴data-，目的是為元素提供與渲染無(wú)關(guān)的信息，或者提供語(yǔ)義信息。
可以通過(guò)元素的dataset屬性來(lái)訪(fǎng)問(wèn)自定義屬性的值。dataset屬性的值是DOMStringMap的一個(gè)實(shí)例，也就是一個(gè)名值對(duì)兒的映射。比如，自定義屬性是data-myname，那映射中對(duì)應(yīng)的屬性就是myname。
var div = document.getElementById('myDiv');
var appId = div.dataset.appId;
var myName = div.dataset.myname;
div.dataset.appId = 23456;
div.dataset.myname = 'Michael';
11.3.6 插入標(biāo)記
- innerHTML 屬性
在讀模式下，innerHTML屬性返回與調(diào)用元素的所有子節(jié)點(diǎn)對(duì)應(yīng)的 HTML 標(biāo)記。在寫(xiě)模式下，innerHTML會(huì)根據(jù)指定的值創(chuàng)建新的 DOM 樹(shù)，然后用這個(gè) DOM 樹(shù)完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)。
div.innerHTML = 'hello world!';
div.innerHTML = "hello,<b>\""reader\""!</b>";
- outerHTML 屬性
在讀模式下，該屬性返回所有調(diào)用它的元素及所有子節(jié)點(diǎn)的 HTML 標(biāo)簽。再寫(xiě)模式下，會(huì)根據(jù)指定的 HTML 字符串創(chuàng)建新的 DOM 子樹(shù)，然后用這個(gè) DOM 子樹(shù)完全替換調(diào)用元素。 - insertAdjacentHTML() 方法
該方法接收兩個(gè)參數(shù)，插入位置和要插入的 HTML 文本。
11.3.7 scrollIntoView() 方法
該方法可以在所有 HTML 元素上調(diào)用，通過(guò)滾動(dòng)瀏覽器窗口或某個(gè)容器元素，調(diào)用元素就會(huì)出現(xiàn)在視口中。如果給這個(gè)方法傳入true作為參數(shù)，或不傳入任何參數(shù)，那么窗口滾動(dòng)之后會(huì)讓調(diào)用元素的頂部與視口頂部盡可能平齊。如傳入false作為參數(shù)，調(diào)用參數(shù)會(huì)盡可能全部出現(xiàn)在視口中，可能的話(huà)，調(diào)用元素的底部會(huì)與視口頂部平齊。
document.forms[0].scrollIntoView();
11.4 專(zhuān)有擴(kuò)展
11.4.1 文檔模式
要強(qiáng)制瀏覽器以某種模式渲染頁(yè)面，可以使用 HTTP 頭部信息X-UA-Compatible，或通過(guò)等價(jià)的<meta>標(biāo)簽來(lái)設(shè)置：
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
11.4.2 children 屬性
該屬性是HTMLCollection的實(shí)例，只包含元素中同樣還是元素的子節(jié)點(diǎn)。
var childCount = element.children.length;
var firstChild = element.children[0];
11.4.3 contains() 方法
調(diào)用contains()方法的應(yīng)該是祖先節(jié)點(diǎn)，接收一個(gè)參數(shù)，即要檢測(cè)的后代節(jié)點(diǎn)。
alert(document.documentElement.contains(document.body)); //true
使用 DOM Level 3 compareDocumentPosition()也能確定節(jié)點(diǎn)間的關(guān)系。
11.4.4 插入文本
這兩個(gè)沒(méi)有被 HTML5 看中的屬性是innerText和outerText。
11.4.5 滾動(dòng)
-
scrollIntoViewIfNeeded(alignCenter)：若可選參數(shù)設(shè)為true，則表示盡量顯示在垂直方向的中部。 -
scrollByLines(lineCount)：將元素的內(nèi)容滾動(dòng)指定的行高，可以是正值，也可以是負(fù)值。 -
scrollByPages(pageCount)：滾動(dòng)指定的頁(yè)面高度。
11.5 小結(jié)
雖然 DOM 為與 XML 及 HTML 文檔交互制定了一系列核心 API，但仍然有幾個(gè)規(guī)范對(duì)標(biāo)準(zhǔn)的 DOM 進(jìn)行了擴(kuò)展。
- Selectors API
- Element Traversal
- HTML 5
