本章內(nèi)容
- DOM2 和 DOM3 的變化
- 操作樣式的 DOM API
- DOM 遍歷與范圍
12.1 DOM 變化
DOM2 級和 3 級的目的在于擴(kuò)展 DOM API，以滿足操作 XML 的所有需求，同時提供更好的錯誤處理及特性檢測能力。
可以通過下列代碼來確定瀏覽器是否支持這些 DOM 模塊。
var supportsDOM3Core = document.implementation.hasFeature('Core', '3.0');
var supportsDOM2HTML = document.implementation.hasFeature('HTML', '2.0');
var supportsDOM2Views = document.implementation.hasFeature('Views', '2.0');
var supportsDOM2XML = document.implementation.hasFeature('XML','2.0');
12.1.1 針對 XML 命名空間的變化
12.2.2 其他方面的變化
12.2 樣式
12.2.1 訪問元素的樣式
任何支持style特性的 HTML 元素在 JavaScript 中都有一個對應(yīng)的style屬性。對于使用短劃線的 CSS 屬性，必須將其轉(zhuǎn)換成駝峰大小寫形式，才能通過JavaScript來訪問。
12.2.2 操作樣式表
CSSStyleSheet類型表示的是樣式表，包括通過<link>元素包含的樣式表和<style>元素中定義的樣式表。繼承自StyleSheet。
12.2.3 元素大小
- 偏移量
- 客戶區(qū)大小
- 滾動大小
- 確定元素大小
12.3 遍歷
12.3.1 NodeIterator
12.3.4 TreeWalker
12.4 范圍
12.4.1 DOM 中的范圍
var supportsRange = document.implementation.hasFeature('Range', '2.0');
var range = document.createRange();
- 用 DOM 范圍實現(xiàn)簡單選擇
var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1');
range1.selectNode(p1);
range2.selectNodeContents(p1);
用 DOM 范圍實現(xiàn)復(fù)雜選擇
操作 DOM 范圍中的內(nèi)容
插入 DOM 范圍中的內(nèi)容
折疊 DOM 范圍
比較 DOM 范圍
復(fù)制 DOM 范圍
清理 DOM 范圍
12.4.2 IE8 及更早版本中的范圍
12.5 小結(jié)
“DOM2 級樣式”模塊主要針對操作元素的樣式信息而開發(fā)，其特性簡要總結(jié)如下。
- 每個元素都有一個關(guān)聯(lián)的
style對象，可以用來確定和修改行內(nèi)的樣式。 - 要確定某個元素的計算樣式，可以使用
getComputedStyle()方法。 - IE 不支持
getComputedStyle()方法，但為所有元素都提供了能夠返回相同信息currentStyle屬性。 - 可以通過
document.styleSheets集合訪問樣式表。 - 除 IE 之外的所有瀏覽器都支持針對樣式表的這個接口，IE 也為幾乎所有相應(yīng)的 DOM 功能提供了自己的一套屬性和方法。
“DOM2 級遍歷和范圍”模塊提供了與 DOM 結(jié)構(gòu)交互的不同方式，簡要總結(jié)如下。
- 遍歷即使用
NodeIterator或TreeWalker對 DOM 執(zhí)行深度優(yōu)先的遍歷。 -
NodeIterator是一個簡單的接口，只允許以一個節(jié)點(diǎn)的步幅前后移動。而TreeWalker在提供相同功能的同時，還支持在 DOM 結(jié)構(gòu)的各個方向上移動，包括父節(jié)點(diǎn)、同輩節(jié)點(diǎn)和子節(jié)點(diǎn)等方向。 - 范圍是選擇 DOM 結(jié)構(gòu)中特定部分，然后再執(zhí)行相應(yīng)操作的一種手段。
- 使用范圍選區(qū)可以在刪除文檔中某些部分的同時，保持文檔結(jié)構(gòu)的格式良好，或者復(fù)制文檔中的相應(yīng)部分。
- IE8 及更早版本不支持“DOM2 級遍歷和范圍”模塊，但它提供了一個專有的文本范圍對象，可以用來完成簡單的基于文本的范圍操作。IE9 完全支持 DOM 遍歷。
