DOM擴展,DOM2和DOM3

DOM擴展

選擇符API

Selectors API Level 1 的核心是兩個方法：querySelector()和querySelectorAll()。在兼容的瀏
覽器中，能夠經過Document 及Element 類型的實例調用它們。目前已徹底支持Selectors API Level 1
的瀏覽器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。

querySelector()方法

//取得body 元素
var body = document.querySelector("body");
//取得ID 爲"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得類爲"selected"的第一個元素
var selected = document.querySelector(".selected");
//取得類爲"button"的第一個圖像元素
var img = document.body.querySelector("img.button");

querySelectorAll()方法

//取得某<div>中的全部<em>元素（相似於getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得類爲"selected"的全部元素
var selecteds = document.querySelectorAll(".selected");
//取得全部<p>元素中的全部<strong>元素
var strongs = document.querySelectorAll("p strong");

HTML5

與類相關的擴充

getElementsByClassName()方法

//取得全部類中包含"username"和"current"的元素，類名的前後順序無所謂
var allCurrentUsernames = document.getElementsByClassName("username current");

支持 getElementsByClassName()方法的瀏覽器有IE 9+、Firefox 3+、Safari 3.1+、Chrome 和
Opera 9.5+。

焦點管理

document.activeElement

這個屬性指向的是當前得到焦點的元素,使用focus()可讓元素得到焦點

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true

document.hasFocus()

這個方法用於肯定文檔是否得到了焦點

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true

實現了這兩個屬性的瀏覽器的包括IE 4+、Firefox 3+、Safari 4+、Chrome 和Opera 8+。

HTMLDocument的變化

readyState 屬性

document.readyState表示文檔的加載進度,它有兩個值分別爲'loading'和'complete'.

if(document.readyState == 'complete'){
    //執行操做
}

支持 readyState 屬性的瀏覽器有IE4+、Firefox 3.6+、Safari、Chrome 和Opera 9+。

compatMode 的屬性

document.compatMode屬性告訴開發人員瀏覽器採用了哪一種渲染模式。在標準模式下，document.compatMode 的
值等於"CSS1Compat"，而在混雜模式下，document.compatMode 的值等於"BackCompat"。

if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

兼容性:IE、Firefox、Safari 3.1+、Opera 和Chrome

字符編碼

document.charset

當前文檔的字符編碼

document.defaultCharset

當前文檔的默認字符編碼

自定義數據屬性

HTML5 規定能夠爲元素添加非標準的屬性，但要添加前綴data-，目的是爲元素提供與渲染無關的信息，或者提供語義信息。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

var div = document.getElementById("myDiv");
//取得自定義屬性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//設置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";

if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}

支持自定義數據屬性的瀏覽器有Firefox 6+和Chrome

插入標記

innerHTML屬性

在讀模式下，innerHTML 屬性返回與調用元素的全部子節點（包括元素、註釋和文本節點）對應
的HTML 標記。在寫模式下，innerHTML 會根據指定的值建立新的DOM樹，而後用這個DOM樹徹底
替換調用元素原先的全部子節點

outerHTML 屬性

在讀模式下，outerHTML 返回調用它的元素及全部子節點的HTML 標籤。在寫模式下，outerHTML
會根據指定的HTML 字符串建立新的DOM 子樹，而後用這個DOM子樹徹底替換調用元素。

內存與性能問題

使用本節介紹的方法替換子節點可能會致使瀏覽器的內存佔用問題，尤爲是在IE 中，問題更加明
顯。在刪除帶有事件處理程序或引用了其餘JavaScript 對象子樹時，就有可能致使內存佔用問題。假設
某個元素有一個事件處理程序（或者引用了一個JavaScript 對象做爲屬性），在使用前述某個屬性將該元
素從文檔樹中刪除後，元素與事件處理程序（或JavaScript 對象）之間的綁定關係在內存中並無一併
刪除。若是這種狀況頻繁出現，頁面佔用的內存數量就會明顯增長。所以，在使用innerHTML、
outerHTML 屬性方法時，最好先手工刪除要被替換的元素的全部事件處理程序和JavaScript 對象屬性

scrollIntoView()方法

//讓元素可見
document.forms[0].scrollIntoView();

DOM2和DOM3

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 基礎上構建，添加了更多屬性、方法和新接口

樣式

在 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");

訪問元素的樣式

任何支持 style 特性的HTML 元素在JavaScript 中都有一個對應的style 屬性。訪問和設置元素的css屬性能夠這樣操做:

var div = document.getElementById('myDiv');
console.log(div.style.color); //獲取color值
div.style.color = 'red';    //設置color值
div.style.fontSize = '20px';//設置font-size的值(這裏會將有短橫線的值轉化爲駝峯命名來獲取或設置)

注：IE6+,chrome,firfox支持這種獲取或設置css的方式.這裏有一個特例,因爲float是保留關鍵字,因此經過cssFloat來訪問和設置,而IE中則經過styleFloat來設置或訪問.
元素的style對象除了有css的樣式屬性外,也包含了本身的一些屬性,具體以下:

• cssText：經過它可以訪問和設置style 特性中的CSS代碼.支持IE6+,chrome,firfox.

• length：應用給元素的CSS 屬性的數量。支持IE9+,chrome,firfox.

• parentRule：表示CSS 信息的CSSRule 對象,後面將討論CSSRule 類型。

• getPropertyPriority(propertyName)：若是給定的屬性使用了!important 設置，則返回"important"；不然，返回空字符串。支持IE9+,chrome,firfox.

• getPropertyValue(propertyName)：返回給定屬性的字符串值。支持IE9+、Safari,Chrome,firfox

• item(index)：返回給定位置的CSS 屬性的名稱。支持IE9+、Safari,Chrome,firfox

• removeProperty(propertyName)：從樣式中刪除給定屬性。支持IE9+、Safari,Chrome,firfox

• setProperty(propertyName,value,priority)：將給定屬性設置爲相應的值，並加上優先權標誌（"important"或者一個空字符串）。支持IE9+、Safari,Chrome,firfox

//設置style對象的cssText屬性
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);

操做樣式表

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屬性

元素大小

偏移量

• offsetHeight：元素在垂直方向上佔用的空間大小，以像素計。包括元素的高度、（可見的）水平滾動條的高度、上邊框高度和下邊框高度。

• offsetWidth：元素在水平方向上佔用的空間大小，以像素計。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度和右邊框寬度。

• offsetLeft：元素的左外邊框至包含元素的左內邊框之間的像素距離。

• offsetTop：元素的上外邊框至包含元素的上內邊框之間的像素距離。

客戶區大小

有關客戶區大小的屬性有兩個：clientWidth 和clientHeight。其中，clientWidth 屬性是元素內容區寬度加上左右內邊距寬度；clientHeight 屬性是元素內容區高度加上上下內邊距高度

滾動大小

• scrollHeight：在沒有滾動條的狀況下，元素內容的總高度。

• scrollWidth：在沒有滾動條的狀況下，元素內容的總寬度。

• scrollLeft：被隱藏在內容區域左側的像素數。經過設置這個屬性能夠改變元素的滾動位置。

• scrollTop：被隱藏在內容區域上方的像素數。經過設置這個屬性能夠改變元素的滾動位置。

肯定元素大小

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).

遍歷

DOM2 級遍歷和範圍」模塊定義了兩個用於輔助完成順序遍歷DOM 結構的類型：NodeIterator
和TreeWalker。這兩個類型可以基於給定的起點對DOM 結構執行深度優先（depth-first）的遍歷操做。
在與DOM 兼容的瀏覽器中（Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome
0.2 及更高版本），均可以訪問到這些類型的對象。IE 不支持DOM 遍歷。使用下列代碼能夠檢測瀏覽器
對DOM2 級遍歷能力的支持狀況。

var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

範圍

爲了讓開發人員更方便地控制頁面，「DOM2 級遍歷和範圍」模塊定義了「範圍」（range）接口。通過範圍能夠選擇文檔中的一個區域，而沒必要考慮節點的界限（選擇在後臺完成，對用戶是不可見的）。在常規的DOM 操做不能更有效地修改文檔時，使用範圍每每能夠達到目的。Firefox、Opera、Safari 和Chrome 都支持DOM 範圍。IE 以專有方式實現了本身的範圍特性。