資訊專欄INFORMATION COLUMN
摘要：擴(kuò)展選擇符的核心是兩個(gè)方法和。目前已完全支持的瀏覽器有和。在寫(xiě)模式下，會(huì)根據(jù)指定的字符串創(chuàng)建新的子樹(shù)，然后用這個(gè)子樹(shù)完全替換調(diào)用元素。在刪除帶有事件處理程序或引用了其他對(duì)象子樹(shù)時(shí)，就有可能導(dǎo)致內(nèi)存占用問(wèn)題。刪除集合中指定位置的規(guī)則。
DOM擴(kuò)展 選擇符API
Selectors API Level 1 的核心是兩個(gè)方法：querySelector()和querySelectorAll()。在兼容的瀏
覽器中，可以通過(guò)Document 及Element 類型的實(shí)例調(diào)用它們。目前已完全支持Selectors API Level 1
的瀏覽器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。
//取得body 元素
var body = document.querySelector("body");
//取得ID 為"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得類為"selected"的第一個(gè)元素
var selected = document.querySelector(".selected");
//取得類為"button"的第一個(gè)圖像元素
var img = document.body.querySelector("img.button");
querySelectorAll()方法
//取得某中的所有元素（類似于getElementsByTagName("em")） var ems = document.getElementById("myDiv").querySelectorAll("em"); //取得類為"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); //取得所有<元素中的所有元素 var strongs = document.querySelectorAll("p strong"); HTML5 與類相關(guān)的擴(kuò)充 getElementsByClassName()方法
//取得所有類中包含"username"和"current"的元素，類名的先后順序無(wú)所謂 var allCurrentUsernames = document.getElementsByClassName("username current");支持 getElementsByClassName()方法的瀏覽器有IE 9+、Firefox 3+、Safari 3.1+、Chrome 和
焦點(diǎn)管理 document.activeElement
Opera 9.5+。這個(gè)屬性指向的是當(dāng)前獲得焦點(diǎn)的元素,使用focus()可以讓元素獲得焦點(diǎn)
var button = document.getElementById("myButton"); button.focus(); alert(document.activeElement === button); //truedocument.hasFocus()這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)
var button = document.getElementById("myButton"); button.focus(); alert(document.hasFocus()); //true實(shí)現(xiàn)了這兩個(gè)屬性的瀏覽器的包括IE 4+、Firefox 3+、Safari 4+、Chrome 和Opera 8+。
HTMLDocument的變化 readyState 屬性document.readyState表示文檔的加載進(jìn)度,它有兩個(gè)值分別為"loading"和"complete".
if(document.readyState == "complete"){ //執(zhí)行操作 }支持 readyState 屬性的瀏覽器有IE4+、Firefox 3.6+、Safari、Chrome 和Opera 9+。
compatMode 的屬性document.compatMode屬性告訴開(kāi)發(fā)人員瀏覽器采用了哪種渲染模式。在標(biāo)準(zhǔn)模式下，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當(dāng)前文檔的字符編碼
document.defaultCharset當(dāng)前文檔的默認(rèn)字符編碼
自定義數(shù)據(jù)屬性HTML5 規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴data-，目的是為元素提供與渲染無(wú)關(guān)的信息，或者提供語(yǔ)義信息。
var div = document.getElementById("myDiv"); //取得自定義屬性的值 var appId = div.dataset.appId; var myName = div.dataset.myname; //設(shè)置值 div.dataset.appId = 23456; div.dataset.myname = "Michael"; if (div.dataset.myname){ alert("Hello, " + div.dataset.myname); }支持自定義數(shù)據(jù)屬性的瀏覽器有Firefox 6+和Chrome
插入標(biāo)記 innerHTML屬性在讀模式下，innerHTML 屬性返回與調(diào)用元素的所有子節(jié)點(diǎn)（包括元素、注釋和文本節(jié)點(diǎn)）對(duì)應(yīng)
outerHTML 屬性
的HTML 標(biāo)記。在寫(xiě)模式下，innerHTML 會(huì)根據(jù)指定的值創(chuàng)建新的DOM樹(shù)，然后用這個(gè)DOM樹(shù)完全
替換調(diào)用元素原先的所有子節(jié)點(diǎn)在讀模式下，outerHTML 返回調(diào)用它的元素及所有子節(jié)點(diǎn)的HTML 標(biāo)簽。在寫(xiě)模式下，outerHTML
內(nèi)存與性能問(wèn)題
會(huì)根據(jù)指定的HTML 字符串創(chuàng)建新的DOM 子樹(shù)，然后用這個(gè)DOM子樹(shù)完全替換調(diào)用元素。使用本節(jié)介紹的方法替換子節(jié)點(diǎn)可能會(huì)導(dǎo)致瀏覽器的內(nèi)存占用問(wèn)題，尤其是在IE 中，問(wèn)題更加明
scrollIntoView()方法
顯。在刪除帶有事件處理程序或引用了其他JavaScript 對(duì)象子樹(shù)時(shí)，就有可能導(dǎo)致內(nèi)存占用問(wèn)題。假設(shè)
某個(gè)元素有一個(gè)事件處理程序（或者引用了一個(gè)JavaScript 對(duì)象作為屬性），在使用前述某個(gè)屬性將該元
素從文檔樹(shù)中刪除后，元素與事件處理程序（或JavaScript 對(duì)象）之間的綁定關(guān)系在內(nèi)存中并沒(méi)有一并
刪除。如果這種情況頻繁出現(xiàn)，頁(yè)面占用的內(nèi)存數(shù)量就會(huì)明顯增加。因此，在使用innerHTML、
outerHTML 屬性方法時(shí)，最好先手工刪除要被替換的元素的所有事件處理程序和JavaScript 對(duì)象屬性//讓元素可見(jiàn) document.forms[0].scrollIntoView();DOM2和DOM3DOM2 和DOM3級(jí)分為許多模塊（模塊之間具有某種關(guān)聯(lián)），分別描述了DOM 的某個(gè)非常具體的子集。這些模塊如下
DOM2 級(jí)核心（DOM Level 2 Core）：在1 級(jí)核心基礎(chǔ)上構(gòu)建，為節(jié)點(diǎn)添加了更多方法和屬性。
DOM2 級(jí)視圖（DOM Level 2 Views）：為文檔定義了基于樣式信息的不同視圖。
DOM2 級(jí)事件（DOM Level 2 Events）：說(shuō)明了如何使用事件與DOM文檔交互。
DOM2 級(jí)樣式（DOM Level 2 Style）：定義了如何以編程方式來(lái)訪問(wèn)和改變CSS 樣式信息。
DOM2 級(jí)遍歷和范圍（DOM Level 2 Traversal and Range）：引入了遍歷DOM 文檔和選擇其特定部分的新接口。
DOM2 級(jí) HTML（DOM Level 2 HTML）：在1 級(jí)HTML 基礎(chǔ)上構(gòu)建，添加了更多屬性、方法和新接口
樣式在 HTML 中定義樣式的方式有3 種：通過(guò)元素包含外部樣式表文件、使用元素
定義嵌入式樣式，以及使用style 特性定義針對(duì)特定元素的樣式。“DOM2 級(jí)樣式”模塊圍繞這3 種應(yīng)用
樣式的機(jī)制提供了一套API。要確定瀏覽器是否支持DOM2 級(jí)定義的CSS 能力，可以使用下列代碼var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0"); var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");訪問(wèn)元素的樣式任何支持 style 特性的HTML 元素在JavaScript 中都有一個(gè)對(duì)應(yīng)的style 屬性。訪問(wèn)和設(shè)置元素的css屬性可以這樣操作:
var div = document.getElementById("myDiv"); console.log(div.style.color); //獲取color值 div.style.color = "red"; //設(shè)置color值 div.style.fontSize = "20px";//設(shè)置font-size的值(這里會(huì)將有短橫線的值轉(zhuǎn)化為駝峰命名來(lái)獲取或設(shè)置)注：IE6+,chrome,firfox支持這種獲取或設(shè)置css的方式.這里有一個(gè)特例,由于float是保留關(guān)鍵字,所以通過(guò)cssFloat來(lái)訪問(wèn)和設(shè)置,而IE中則通過(guò)styleFloat來(lái)設(shè)置或訪問(wèn).
元素的style對(duì)象除了有css的樣式屬性外,也包含了自己的一些屬性,具體如下:cssText：通過(guò)它能夠訪問(wèn)和設(shè)置style 特性中的CSS代碼.支持IE6+,chrome,firfox.
length：應(yīng)用給元素的CSS 屬性的數(shù)量。支持IE9+,chrome,firfox.
parentRule：表示CSS 信息的CSSRule 對(duì)象,后面將討論CSSRule 類型。
getPropertyPriority(propertyName)：如果給定的屬性使用了!important 設(shè)置，則返回"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)：將給定屬性設(shè)置為相應(yīng)的值，并加上優(yōu)先權(quán)標(biāo)志（"important"或者一個(gè)空字符串）。支持IE9+、Safari,Chrome,firfox
//設(shè)置style對(duì)象的cssText屬性 myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; alert(myDiv.style.cssText);操作樣式表CSSStyleSheet 類型表示的是樣式表，包括通過(guò)元素包含的樣式表和在