[TOC]
## 9.4 DOM2和DOM3
DOM1級主要定義的是HTML和XML文檔的底層結構。DOM2和DOM3級則在這個結構的基礎上引入了更多的交互能力,也支持了更高級的XML特性。
DOM2 和DOM3級分為許多模塊(模塊之間具有某種關聯),分別描述了DOM 的某個非常具體的子集。這些模塊如下:
* DOM2 級核心(DOM Level 2 Core):在1 級核心基礎上構建,為節點添加了更多方法和屬性。
* DOM2 級視圖(DOM Level 2 Views):為文檔定義了基于樣式信息的不同視圖。
* DOM2 級事件(DOM Level 2 Events):說明了如何使用事件與DOM文檔交互。
* DOM2 級樣式(DOM Level 2 Style):定義了如何以編程方式來訪問和改變CSS 樣式信息。
* DOM2 級遍歷和范圍(DOM Level 2 Traversal and Range):引入了遍歷DOM 文檔和選擇其特定部分的新接口。
* DOM2 級 HTML(DOM Level 2 HTML):在1 級HTML 基礎上構建,添加了更多屬性、方法和新接口
### 9.4.1 樣式
在 HTML 中定義樣式的方式有3 種:通過<link/>元素包含外部樣式表文件、使用<style/>元素定義嵌入式樣式,以及使用style 特性定義針對特定元素的樣式。
“DOM2 級樣式”模塊圍繞這3 種應用
樣式的機制提供了一套API。要確定瀏覽器是否支持DOM2 級定義的CSS 能力,可以使用下列代碼
~~~
var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");
~~~
**1. 訪問元素的樣式**
任何支持 style 特性的HTML 元素在JavaScript 中都有一個對應的style 屬性。這個style對象是CSSStyleDeclaration的實例,包含著通過HTML的style特性指定的所有樣式信息,但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式。
訪問和設置元素的css屬性可以這樣操作:
~~~
var div = document.getElementById('myDiv');
console.log(div.style.color); //獲取color值
div.style.color = 'red'; //設置color值
div.style.fontSize = '20px';//設置font-size的值(這里會將有短橫線的值轉化為駝峰命名來獲取或設置)
~~~
特例:由于float是保留關鍵字,所以通過cssFloat來訪問和設置,而IE中則通過styleFloat來設置或訪問.
元素的style對象除了有css的樣式屬性外,也包含了自己的一些屬性和方法,具體如下:
|||
|---|---|
|cssText|通過它能夠訪問和設置style 特性中的CSS代碼。|
|length|應用給元素的CSS 屬性的數量。|
|parentRule|表示CSS 信息的CSSRule 對象,后面將討論CSSRule 類型。|
|getPropertyPriority(propertyName)|如果給定的屬性使用了!important 設置,則返回"important";否則,返回空字符串。|
|getPropertyValue(propertyName) | 返回給定屬性的字符串值。支持IE9+、Safari,Chrome,firfox |
|item(index)|返回給定位置的CSS 屬性的名稱。 |
|removeProperty(propertyName)|從樣式中刪除給定屬性。 |
|setProperty(propertyName,value,priority)|將給定屬性設置為相應的值,并加上優先權標志("important"或者一個空字符串)。 |
~~~
//設置style對象的cssText屬性
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);
~~~
DOM2樣式增強了document.defaultView,提供了`getComputedStyle()方法`。接受兩個參數:要去的計算樣式的元素和一個偽元素字符串(如“:after”)。返回一個CSSSstyleDeclaration對象,其中包含當前元素的所有計算的樣式。
**2. 操作樣式表**
CSSStyleSheet 類型表示的是樣式表,包括通過<link>元素包含的樣式表和在<style>元素中定義的樣式表,使用下面的代碼可以確定瀏覽器是否支持DOM2 級樣式表:
~~~
var supportsDOM2StyleSheets =document.implementation.hasFeature("StyleSheets", "2.0");
~~~
CSSStyleSheet 繼承自StyleSheet,后者可以作為一個基礎接口來定義非CSS 樣式表。從StyleSheet 接口繼承而來的屬性如下:
|||
|---|---|
| disabled | 表示樣式表是否被禁用的布爾值。這個屬性是可讀/寫的,將這個值設置為true可以禁用樣式表。|
| href | 如果樣式表是通過<link>包含的,則是樣式表的URL;否則,是null。|
| media | 當前樣式表支持的所有媒體類型的集合。與所有DOM 集合一樣,這個集合也有一個length 屬性和一個item()方法。也可以使用方括號語法取得集合中特定的項。如果集合是空列表,表示樣式表適用于所有媒體。在IE 中,media 是一個反映<link>和<style>元素media特性值的字符串。|
| ownerNode | 指向擁有當前樣式表的節點的指針,樣式表可能是在HTML 中通過<link>或<style/>引入的(在XML 中可能是通過處理指令引入的)。如果當前樣式表是其他樣式表通過@import 導入的,則這個屬性值為null。IE 不支持這個屬性。|
| parentStyleSheet | 在當前樣式表是通過@import 導入的情況下,這個屬性是一個指向導入它的樣式表的指針。|
| title | ownerNode 中title 屬性的值。|
| type | 表示樣式表類型的字符串。對CSS 樣式表而言,這個字符串是"type/css"。|
除了 disabled 屬性之外,其他屬性都是只讀的。在支持以上所有這些屬性的基礎上,CSSStyleSheet 類型還支持下列屬性和方法:
|||
|---|---|
| cssRules | 樣式表中包含的樣式規則的集合。IE 不支持這個屬性,但有一個類似的rules 屬性。|
| ownerRule | 如果樣式表是通過@import 導入的,這個屬性就是一個指針,指向表示導入的規則;否則,值為null。IE 不支持這個屬性。|
| deleteRule(index) | 刪除cssRules 集合中指定位置的規則。IE 不支持這個方法,但支持一個類似的removeRule()方法。|
| insertRule(rule,index) | 向cssRules 集合中指定的位置插入rule 字符串。IE 不支持這個方法,但支持一個類似的addRule()方法。|
應用于文檔的所有樣式表是通過 document.styleSheets 集合來表示的。也可以直接通過<link>或<style>元素取得CSSStyleSheet 對象。DOM 規定了一個包含CSSStyleSheet 對象的屬性,名叫sheet;除了IE,其他瀏覽器都支持這個屬性。IE 支持的是styleSheet屬性。
**3. 元素大小**
(1)偏移量
指包括元素在屏幕上占用的所有可見的空間。
元素的可見大小由高度、寬度決定,包括所有內邊距、滾動條和邊框大小(不包括外邊距)
|||
|---|---|
| offsetHeight| 元素在垂直方向上占用的空間大小,以像素計。包括元素的高度、(可見的)水平滾動條的高度、上邊框高度和下邊框高度。|
| offsetWidth| 元素在水平方向上占用的空間大小,以像素計。包括元素的寬度、(可見的)垂直滾動條的寬度、左邊框寬度和右邊框寬度。|
| offsetLeft| 元素的左外邊框至包含元素的左內邊框之間的像素距離。|
| offsetTop| 元素的上外邊框至包含元素的上內邊框之間的像素距離。|
(2)客戶區大小
指元素內容及其內邊距所占據的空間大小。
有關客戶區大小的屬性有兩個:
|||
|---|---|
| clientWidth| 元素內容區寬度加上左右內邊距寬度。|
| clientHeight| 元素內容區高度加上上下內邊距高度。|
(3)滾動大小
指包含滾動內容的元素的大小。
|||
|---|---|
| scrollHeight| 在沒有滾動條的情況下,元素內容的總高度。|
| scrollWidth| 在沒有滾動條的情況下,元素內容的總寬度。|
| scrollLeft| 被隱藏在內容區域左側的像素數。通過設置這個屬性可以改變元素的滾動位置。|
| scrollTop| 被隱藏在內容區域上方的像素數。通過設置這個屬性可以改變元素的滾動位置。|
(4)確定元素大小
IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 為每個元素都提供了一個getBoundingClientRect()方法。這個方法返回會一個矩形對象,包含4 個屬性:left、top、right 和bottom。這些屬性給出了元素在頁面中相對于視口的位置。但是,瀏覽器的實現稍有不同。IE8 及更早版本認為文檔的左上角坐標是(2, 2),而其他瀏覽器包括IE9 則將傳統的(0,0)作為起點坐標。因此,就需要在一開始檢查一下位于(0,0)處的元素的位置,在IE8 及更早版本中,會返回(2,2),而在其他瀏覽器中會返回(0,0)。
### 9.4.3 遍歷
DOM2 級遍歷和范圍”模塊定義了兩個用于輔助完成順序遍歷DOM 結構的類型:`NodeIterator和TreeWalker`。這兩個類型能夠基于給定的起點對DOM 結構執行深度優先(depth-first)的遍歷操作。在與DOM 兼容的瀏覽器中(Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome0.2 及更高版本),都可以訪問到這些類型的對象。IE 不支持DOM 遍歷。使用下列代碼可以檢測瀏覽器
對DOM2 級遍歷能力的支持情況。
~~~
var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");
~~~
**NodeIterator是一個簡單的接口,只允許以一個節點的步幅前后移動。而TreeWalker在提供相同功能的同時,還支持在DOM結構的各個方向上移動,包括父節點、同輩節點和子節點等方向。**
### 9.4.4 范圍
為了讓開發人員更方便地控制頁面,“DOM2 級遍歷和范圍”模塊定義了“范圍”(range)接口。通過范圍可以選擇文檔中的一個區域,而不必考慮節點的界限(選擇在后臺完成,對用戶是不可見的)。在常規的DOM 操作不能更有效地修改文檔時,使用范圍往往可以達到目的。Firefox、Opera、Safari 和Chrome 都支持DOM 范圍。IE 以專有方式實現了自己的范圍特性。
* 范圍是選擇DOM結構中特定部分,然后再執行相應操作的一種手段。
* 使用范圍選取可以在刪除文檔中某些部分的同事,包吃文檔結構的格式良好,或者復制文檔中的相應部分。
- 前言
- 第一章 JavaScript簡介
- 第三章 基本概念
- 3.1-3.3 語法、關鍵字和變量
- 3.4 數據類型
- 3.5-3.6 操作符、流控制語句(暫略)
- 3.7函數
- 第四章 變量的值、作用域與內存問題
- 第五章 引用類型
- 5.1 Object類型
- 5.2 Array類型
- 5.3 Date類型
- 5.4 基本包裝類型
- 5.5 單體內置對象
- 第六章 面向對象的程序設計
- 6.1 理解對象
- 6.2 創建對象
- 6.3 繼承
- 第七章 函數
- 7.1 函數概述
- 7.2 閉包
- 7.3 私有變量
- 第八章 BOM
- 8.1 window對象
- 8.2 location對象
- 8.3 navigator、screen與history對象
- 第九章 DOM
- 9.1 節點層次
- 9.2 DOM操作技術
- 9.3 DOM擴展
- 9.4 DOM2和DOM3
- 第十章 事件
- 10.1 事件流
- 10.2 事件處理程序
- 10.3 事件對象
- 10.4 事件類型
- 第十一章 JSON
- 11.1-11.2 語法與序列化選項
- 第十二章 正則表達式
- 12.1 創建正則表達式
- 12.2-12.3 模式匹配與RegExp對象
- 第十三章 Ajax
- 13.1 XMLHttpRequest對象
- 你不知道的JavaScript
- 一、作用域與閉包
- 1.1 作用域
- 1.2 詞法作用域
- 1.3 函數作用域與塊作用域
- 1.4 提升
- 1.5 作用域閉包
- 二、this與對象原型
- 2.1 關于this
- 2.2 全面解析this
- 2.3 對象
- 2.4 混合對象“類”
- 2.5 原型
- 2.6 行為委托
- 三、類型與語法
- 3.1 類型
- 3.2 值
- 3.3 原生函數