本章內(nèi)容
- 理解 Selectors API
- 使用 HTML5 DOM 擴(kuò)展
- 了解專有的 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è)元素剪返，如果沒有找到匹配的元素，返回null。
var myDiv = document.querySelector('#myDiv');
var img = document.body.querySelector('img.button');
通過Document類型調(diào)用時(shí)十饥，會(huì)在文檔元素的范圍內(nèi)查找匹配的元素。而通過Element類型調(diào)用querySelector()方法時(shí)祖乳，只會(huì)在該元素后代元素的范圍內(nèi)查找匹配的元素逗堵。
querySelectorAll() 方法
這個(gè)方法返回的是一個(gè)NodeList的實(shí)例，實(shí)際上是帶有所有屬性和方法的NodeList眷昆。
11.1.3 matchesSelector() 方法
Selectors API Level 2 規(guī)范為Element類型新增了一個(gè)方法matchesSelector()蜒秤。這個(gè)方法接收一個(gè) CSS 選擇符，如果調(diào)用元素與該選擇符匹配亚斋，返回true作媚；否則，返回false帅刊。
if (document.body.matchesSelector("body.page1")) {
//true
}
11.2 元素遍歷
過去纸泡，要跨瀏覽器遍歷某元素的所有子元素，需要這樣寫赖瞒。
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 與類相關(guān)的擴(kuò)充
- getElementsByClassName() 方法
該方法接收一個(gè)參數(shù)栏饮，即一個(gè)包含一或多個(gè)類名的字符串田绑，返回帶有指定類型的所有元素的NodeList。
var allCurrentUsernames = document.getElementsByClassName("username current");
- classList 屬性
//刪除類
div.classList.remove('user');
//添加類
div.classList.add('current');
//切換類
div.classList.toggle('user');
//確定元素中是否包含類
if(div.classList.contains('bd') && !div.classList.contains('disabled')) {
}
迭代類名
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ǔ)義信息。
可以通過元素的dataset屬性來(lái)訪問自定義屬性的值柠衅。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)記势誊。在寫模式下，innerHTML會(huì)根據(jù)指定的值創(chuàng)建新的 DOM 樹谣蠢，然后用這個(gè) DOM 樹完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)粟耻。
div.innerHTML = 'hello world!';
div.innerHTML = "hello,<b>\""reader\""!</b>";
- outerHTML 屬性
在讀模式下查近，該屬性返回所有調(diào)用它的元素及所有子節(jié)點(diǎn)的 HTML 標(biāo)簽。再寫模式下挤忙，會(huì)根據(jù)指定的 HTML 字符串創(chuàng)建新的 DOM 子樹霜威，然后用這個(gè) DOM 子樹完全替換調(diào)用元素。 - insertAdjacentHTML() 方法
該方法接收兩個(gè)參數(shù)册烈，插入位置和要插入的 HTML 文本戈泼。
11.3.7 scrollIntoView() 方法
該方法可以在所有 HTML 元素上調(diào)用，通過滾動(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)在視口中窑滞，可能的話琼牧，調(diào)用元素的底部會(huì)與視口頂部平齊恢筝。
document.forms[0].scrollIntoView();
11.4 專有擴(kuò)展
11.4.1 文檔模式
要強(qiáng)制瀏覽器以某種模式渲染頁(yè)面哀卫，可以使用 HTTP 頭部信息X-UA-Compatible，或通過等價(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è)沒有被 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
