DOM變化
DOM2級和3級的目的在於擴充套件DOM API,以滿足操作XML的所有需求,同時提供更好的錯誤處理及特性檢測能力。從某種意義上講,實現這一目的的很大程度意味著對名稱空間的支援。
var supportsDOM2Core = document.implementation.hasFeature('Core', '2.0');
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')
複製程式碼
針對XML名稱空間的變化
有了XML名稱空間,不同XML文件的元素就可以混合一起,共同構成格式良好的文件,而不必擔心發生命名衝突。
名稱空間要使用xmlns特性來指定。
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Example XHTML page</title>
</head>
<body>
Hello world!
</body>
</html>
複製程式碼
Node型別的變化
在DOM2級中,Node型別包含下列特定於名稱空間的屬性。
- localName: 不帶名稱空間字首的節點名稱
- namespaceURI: 名稱空間URI或者(在未指定的情況下是)null
- prefix: 名稱空間字首或者(未指定的情況下是)null
其他方面的變化
DOM的其他部分在‘DOM2級核心’中也發生了一些變化。這些變化與XML名稱空間無關,而是更傾向於確保API的可靠性及完整性。
DocumentType型別的變化
新增了3個屬性:publicId、systemId和internalSubset。
Document型別的變化
Document型別的變化中唯一與名稱空間無關的方法是importNode()。
需要注意的是,每個節點都有一個ownerDocument屬性,表示所屬的文件。如果呼叫appendChild()時傳入的節點屬於不同的文件(ownerDocument屬性的值不一樣),則會導致錯誤。但在呼叫importNode()時傳入不同文件的節點則會返回一個新節點,這個新節點的所有權歸當前文件所有。
importNode()方法與Element的cloneNode()方法非常類似,它接受兩個引數:要複製的節點和一個表示是否複製子節點的布林值。
返回的結果是原來節點的副本,但能夠在當前檔案中使用。
var newNode = document.importNode(oldNode, true); //匯入節點及其子節點
document.body.appendChild(newNode);
複製程式碼
Node型別的變化
Node型別中唯一與名稱空間無關的變化,就是新增了isSupported()方法。與DOM1級為document.implementation引入的hasFeature()方法類似,isSupported()方法用於確定當前節點具有什麼能力。
DOM3級引入了兩個輔助比較節點的方法:isSameNode()和isEqualNode()。
這兩個方法都接受一個節點引數,並在傳入節點與引用的節點相同或相等時返回true。
所謂相同,指的是兩個節點引用的是同一個物件。
所謂相等,指的是兩個節點是相同的型別,具有相等的屬性(nodeName、nodeValue),而且它們的attributes和childNodes屬性也相等。
var div1 = document.createElement('div');
div1.setAttribute('class', 'box');
var div2 = docuemnt.createElement('div');
div2.setAttribute('class', 'box');
div1.isSameNode(div1); // true
div1.isSameNode(div2); // false
div1.isEqualNode(div2); // true
複製程式碼
框架的變化
略
樣式
在HTML中定義樣式的方式有3種:通過<link/>
元素包含外部樣式表檔案、使用<style/>
元素定義嵌入式樣式,以及使用style特性定義針對特定元素的樣式。
DOM2級樣式模組圍繞這3種應用樣式的機制提供了一套API。
訪問元素的樣式
任何支援style特性的HTML元素在JavaScript中都有一個對應的style屬性。這個style物件是CSSStyleDeclaration的例項,包含著通過HTML的style特性指定的所有樣式資訊,但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式。
對於短劃線的CSS屬性名,必須將其轉換成駝峰大小寫形式,才能通過JavaScript訪問。
- background-image -> style.backgroundImage
- font-family -> style.fontFamily
其中一個不能直接轉換的CSS屬性就是float。由於float是JavaScript中的保留字,因此不能用作屬性名。規定對應的屬性名是cssFloat。而IE中則是styleFloat。
DOM樣式屬性和方法
DOM2級樣式規範還為style物件定義了一些屬性和方法。這些屬性和方法在提供元素的style特性值的同時,也可以修改樣式。下面列出了這些屬性和方法。
- cssText
- length
- parentRule
- getPropertyCSSValue(propertyName)
- getPropertyPriority(propertyName)
- getPropertyValue(propertyName): 返回給定屬性的字串值
- item(index): 返回給定位置的CSS屬性的名稱
- removeProperty(propertyName):從樣式中刪除給定屬性。
- setProperty(propertyName, value, priority)
設定cssText是為元素應用多項變化最快捷的方式:
myDiv.style.cssText = 'width: 25px; height: 100px'
複製程式碼
迭代CSS屬性:
var prop, value, i, len;
for (i = 0; len = myDiv.style.length; i < len; i++) {
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = myDiv.style.getPropertyValue(prop);
console.log(prop + ' : ' + value)
}
複製程式碼
計算的樣式
getComputedStyle()方法。這個方法接受兩個引數:要取得計算樣式的元素和一個偽元素字串。如果不需要偽元素資訊,第二個引數可以是null。
var myDiv = document.getElementById('myDiv');
var computedStyle = myDiv.computedStyle // IE環境下 myDiv.currentStyle
複製程式碼
這個屬性是CSSStyleDeclaration的例項。
操作樣式表
CSSStyleSheet物件是一套只讀的介面(有一個屬性例外)。使用下面的程式碼可以確定瀏覽器是否支援DOM2級樣式表。
var supportDOM2StyleSheets = dcoument.implementation.hasFeature('StyleSheets', '2.0');
複製程式碼
CSSStyleSheet繼承自StyleSheet,後者可以作為一個基礎介面來定義非CSS樣式表。從StyleSheet介面繼承而來的屬性如下。
- disabled: 表示樣式表是否被禁用的布林值。
- href:如果樣式表是通過包含的,則是樣式表的URL,否則是null
- media:當前樣式表支援的所有媒體型別的集合
- ownerNode: 指向擁有當前樣式的節點的指標,樣式表可能是在HTML中通過
<link>
或<style/>
引入的。如果當前樣式表是其他樣式表通過@import匯入的,則這個屬性值為null。IE不支援這個屬性。 - parentStyleSheet: 在當前樣式表通過@import匯入的情況下,這個屬性是一個指向匯入它的樣式表的指標。
- title: ownerNode中title屬性的值。
- type:表示樣式表型別的字串。對CSS樣式表而言,這個字串是'text/css'。
- cssRules:樣式表中包含的樣式規則的集合。IE中類似的是rules屬性。
- ownerRule:如果樣式表是通過@import匯入的,這個屬性就是一個指標,指向表示匯入的規則;否則值為null。
- deleteRule(index):刪除cssRules集合中指定位置的規則。
- insertRule(rule, index):向cssRules集合中指定的位置插入rule字串。
應用於文件的所有樣式表是通過document.styleSheets集合來表示的。
var sheet = null;
for (var i = 0, len = document.styleSheets.length; i < len; i++) {
sheet = document.styleSheets[i];
console.log(sheet.href)
}
複製程式碼
元素大小
偏移量
offset dimension,包括元素在螢幕上佔用的所有可見的空間。通過下面四個屬性可以取得元素的偏移量。
- offsetHeight
- offsetWidth
- offsetLeft
- offsetTop
其中offsetLeft和offsetTop屬性與包含元素有關,包含元素的引用儲存在offsetParent屬性中。offsetParent屬性不一定與parentNode的值相等。例如,元素的offsetParent是作為其祖先元素的
元素,因為最近的一個具有大小的元素。
客戶區大小 client dimension是指元素內容及其內邊距所佔據的空間大小(content + padding)。 clientWidth屬性是元素內容區寬度加上左右內邊距寬度;clientHeight屬性是元素內容區高度加上上下內邊距高度。 常見用法:確定瀏覽器視口大小。
滾動大小(scroll dimension)指的是包含滾動內容的元素的大小。 4個與滾動大小相關的屬性:
因為瀏覽器相容性的問題,在確定文件的總高度時,必須取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值,才能保證在跨瀏覽器時得到精確的結果。
遍歷DOM2級遍歷和範圍模組定義了兩個用於輔助完成順序遍歷DOM結構的型別:NodeIterator和TreeWalker
NodeIteratorNodeIterator型別是兩者中比較簡單的一個,可以使用document.createNodeIterator()方法建立它的新例項。這個方法接受下列4個引數。
whatToShow引數是一個位掩碼,通過應用一或多個filter來確定要訪問哪些節點。這個引數的值以常量形式在NodeFilter型別中定義。
除了NodeFilter.SHOW_ALL之外,可以使用按位或操作符來組合多個選項:
可以通過createNodeIterator()方法的filter引數來指定自定義的NodeFilter物件,或者指定一個功能類似節點過濾器(node filter)的函式。 每個NodeFilter物件只有一個方法,即accept-Node();如果應該訪問給定的節點,該方法返回
第三個引數也可以是一個與acceptNode()方法類似的函式,如下所示。
如果不指定過濾器,那麼應該在第三個引數的位置上傳入null。 NodeIterator型別的兩個主要方法是nextNode()和previousNode()。在剛剛建立的NodeIterator物件中,有一個內部指標指向根節點,因此第一次呼叫nextNode()會返回根節點。 TreeWalkerTreeWalker是NodeIterator的一個更高階的版本。除了包括nextNode()和previousNode()在內的相同的功能之外,這個型別還提供了下列用於在不同方向上遍歷DOM結構的方法。
範圍為了讓開發人員更方便地控制頁面,“DOM2級遍歷和範圍”模組定義了“範圍”(range)介面。通過範圍可以選擇文件中的一個區域,而不必考慮節點的界限。 DOM中的範圍DOM2級在Document型別中定義了createRange()方法。在相容DOM的瀏覽器中,這個方法屬於document物件。
如果瀏覽器支援範圍,那麼就可以使用createRange()來建立DOM範圍。
與節點類似,新建立的範圍也直接與建立它的文件關聯在一起,不能用於其他文件。 IE8及更早版本中的範圍小結DOM2級規範定義了一些模組,用於增強DOM1級
|