国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM擴展,DOM2和DOM3

suxier / 1858人閱讀

摘要：擴展選擇符的核心是兩個方法和。目前已完全支持的瀏覽器有和。在寫模式下，會根據指定的字符串創建新的子樹，然后用這個子樹完全替換調用元素。在刪除帶有事件處理程序或引用了其他對象子樹時，就有可能導致內存占用問題。刪除集合中指定位置的規則。

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()方法 
//取得某
中的所有元素（類似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得類為"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有
元素中的所有元素
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-，目的是為元素提供與渲染無關的信息，或者提供語義信息。

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 種：通過元素包含外部樣式表文件、使用