高程3總結#第12章DOM2和DOM3
阿新 • • 發佈：2018-12-10
DOM2和DOM3
DOM變化
針對XML名稱空間的變化
- 有了XML名稱空間，不同XML文件的元素就可以混合在一起，共同構成格式良好的文件，而不必擔心發生命名衝突
-
Node型別的變化
-
在DOM2級中，Node型別包含下列特定於名稱空間的屬性
- localName，不帶名稱空間字首的節點名稱
- namespaceURI，名稱空間URI或者null
- prefix，名稱空間字首或者null
-
DOM3級更進一步，引入下列與名稱空間有關的方法
- isDefaultNamespace(namespaceURI)，在指定的namespaceURI是當前節點的預設名稱空間的情況下返回true
- lookupNamespaceURI(prefix)，返回給定prefix的名稱空間
- lookupPrefix(namespaceURI)，返回給定namespaceURI的字首
-
-
Document型別的變化
-
DOM2級的Document型別也發生了變化，包含下列與名稱空間有關方法
- createElementNS(namespaceURI,tagName)，使用給定的tagName建立一個屬於名稱空間namespaceURI的新元素
- createAttributeNS(namespaceURI,attributeName)，使用給定的attributeName建立一個屬於名稱空間namespaceURI的新特性
- getElementsByTagNameNS(namespaceURI,tagName)，返回屬於名稱空間namespaceURI的tagName元素的NodeList
-
-
Element型別的變化
-
DOM2級核心中有關Element的變化，主要涉及操作特性
- getAttributeNS(namespaceURI,localName)，取得名稱空間namespaceURI且名為localName的特性
- getAttributeNodeNS(namespaceURI,localName)，取得屬於名稱空間namespaceURI且名為localName的特性節點
- getElementsByTagNameNS(namespaceURI,tagName)，返回屬於名稱空間namespaceURI的tagName元素的NodeList
- hasAttributeNS(namespaceURI,localName)，確定當前元素是否有一個名為localName的特性，而且該特性的名稱空間是namespaceURI
- removeAttributeNS(namespaceURI,localName)，刪除屬於名稱空間namespaceURI且名為localName的特性
- setAttributeNS(namespaceURI,qualifiedName,value)，設定屬於名稱空間namespaceURI且名為localName的特性
- setAttributeNodeNS(attNode)，設定屬於名稱空間namespaceURI的特性節點
-
-
NamedNodeMap型別的變化
-
新增了與名稱空間有關的方法
- getNamedItemNS(namespaceURI,localName)，取得屬於名稱空間namespaceURI且名為localName的項
- removeNamedItemNS(namespaceURI,localName)，移除屬於名稱空間namespaceURI且名為localName的項
- setNamedItemNS(node)，新增node，這個節點已經事先指定了名稱空間資訊
-
其他方面的變化
-
DocumentType型別的變化
- 新增了3個屬性，publicId、systemId、internallSubset。前兩個屬性表示的是文件型別宣告中的兩個資訊段，這兩個資訊段在DOM1級中是沒有辦法訪問到的。最後一個屬性internalSubset，用於訪問包含在文件型別宣告中的額外定義
-
Document型別的變化
- 與空間無關的方法是inportNode()，這個方法的用途是從一個文件中取得一個節點，然後將其匯入到另一個文件，使其成為這個文件結構的一部分。
-
Node型別的變化
- Node型別與名稱空間無關的變化，就是添加了isSupported()方法，與DOM1級為document.implementation引入的hasFeature()方法類似，isSupported()方法用於確定當前節點具有什麼能力，這個方法接收兩個引數，特性名和特性版本號
- DOM3級引入了兩個輔助比較節點的方法，isSameNode()和isEqualNode()。這兩個方法都接收一個節點引數，並在傳入節點與引用的節點相同或相等時返回true
-
框架的變化
- 框架和內嵌框架分別用HTMLFrameElement和HTMLIFrameElement表示，它們在DOM2級中都有了一個新屬性，名叫contentDocument，這個屬性包含一個指標，指向表示框架內容的文件物件
樣式
訪問元素的樣式
- 對於使用短劃線的CSS屬性名，必須將其轉換成駝峰大小寫形式，才能通過javaScript來訪問
-
DOM樣式屬性和方法
- DOM2級樣式規範還為style物件定義了一些屬性和方法，這些屬性和方法在提供元素的style特性值的同時也可以修改樣式
- cssText ：如前所述，通過它能夠訪問到 style 特性中的 CSS 程式碼。
- length ：應用給元素的 CSS 屬性的數量。
- parentRule ：表示 CSS 資訊的 CSSRule 物件。本節後面將討論 CSSRule 型別。
- getPropertyCSSValue(propertyName) ：返回包含給定屬性值的 CSSValue 物件。
- getPropertyPriority(propertyName) ：如果給定的屬性使用了 !important 設定，則返回"important" ；否則，返回空字串。
- getPropertyValue(propertyName) ：返回給定屬性的字串值。
- item(index) ：返回給定位置的 CSS 屬性的名稱。
- removeProperty(propertyName) ：從樣式中刪除給定屬性。
- setProperty(propertyName,value,priority) ：將給定屬性設定為相應的值，並加上優先權標誌（ "important" 或者一個空字串）。
-
計算的樣式
- DOM2級樣式增強了document.defaultView，提供了getComputedStyle()方法，這個方法接受兩個引數：要取得計算樣式的元素和一個偽元素字串。如果不需要偽元素資訊，第二個引數可以輸null
操作樣式表
-
CSSStyleSheet型別表示的是樣式表，包括通過<link>元素包含的樣式表和在<style>元素中定義的樣式表
- 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() 方法。
元素大小
-
偏移量
-
包括元素在螢幕上佔用的所有可見的空間，元素的可見大小由其高度。寬度決定，包括所有內邊距、滾動條和邊框的大小
- offsetHeight ：元素在垂直方向上佔用的空間大小，以畫素計。包括元素的高度、（可見的）水平滾動條的高度、上邊框高度和下邊框高度。
- offsetWidth ：元素在水平方向上佔用的空間大小，以畫素計。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度和右邊框寬度。
- offsetLeft ：元素的左外邊框至包含元素的左內邊框之間的畫素距離。
- offsetTop ：元素的上外邊框至包含元素的上內邊框之間的畫素距離。
-
-
客戶區大小
- 指的是元素內容及其內邊距所佔據空間的大小，有關客戶區大小的屬性有兩個，clientWidth和clientHeight，其中clientWidth屬性是元素內容區寬度加上左右內邊距寬度，clientHeight屬性時元素內容區域高度加上上下內邊距高度
- 指的是元素內容及其內邊距所佔據空間的大小，有關客戶區大小的屬性有兩個，clientWidth和clientHeight，其中clientWidth屬性是元素內容區寬度加上左右內邊距寬度，clientHeight屬性時元素內容區域高度加上上下內邊距高度
-
滾動大小
- 指的是包含滾動內容的元素的大小，有些元素即使沒有執行程式碼也能自動地新增滾動條，但另外一些元素，則需要通過CSS的overflow屬性進行設定才能滾動
- scrollHeight ：在沒有滾動條的情況下，元素內容的總高度。
- scrollWidth ：在沒有滾動條的情況下，元素內容的總寬度。
- scrollLeft ：被隱藏在內容區域左側的畫素數。通過設定這個屬性可以改變元素的滾動位置。
- scrollTop ：被隱藏在內容區域上方的畫素數。通過設定這個屬性可以改變元素的滾動位置。
遍歷
- 任何節點都可以作為遍歷的根節點。如果假設 <body> 元素為根節點，那麼遍歷的第一步就是訪問 <p>元素，然後再訪問同為 <body> 元素後代的兩個文字節點。不過，這次遍歷永遠不會到達 <html> 、 <head>元素，也不會到達不屬於 <body> 元素子樹的任何節點。而以 document 為根節點的遍歷則可以訪問到文件中的全部節點。
Nodelterator
-
可以使用document.createNodeIterator()方法建立它的新例項
- root ：想要作為搜尋起點的樹中的節點。
- whatToShow ：表示要訪問哪些節點的數字程式碼。
- filter ：是一個 NodeFilter 物件，或者一個表示應該接受還是拒絕某種特定節點的函式。
- entityReferenceExpansion ：布林值，表示是否要擴充套件實體引用。這個引數在 HTML 頁面中沒有用，因為其中的實體引用不能擴充套件
-
whatToShow引數是一個位掩碼，通過應用一個或多個過濾器來確定要訪問的節點
- NodeFilter.SHOW_ALL ：顯示所有型別的節點。
- NodeFilter.SHOW_ELEMENT ：顯示元素節點。
- NodeFilter.SHOW_ATTRIBUTE ：顯示特性節點。由於 DOM結構原因，實際上不能使用這個值。
- NodeFilter.SHOW_TEXT ：顯示文字節點。
- NodeFilter.SHOW_CDATA_SECTION ：顯示 CDATA 節點。對 HTML 頁面沒有用。
- NodeFilter.SHOW_ENTITY_REFERENCE ：顯示實體引用節點。對 HTML 頁面沒有用。
- NodeFilter.SHOW_ENTITYE ：顯示實體節點。對 HTML 頁面沒有用。
- NodeFilter.SHOW_PROCESSING_INSTRUCTION ：顯示處理指令節點。對 HTML 頁面沒有用。
- NodeFilter.SHOW_COMMENT ：顯示註釋節點。
- NodeFilter.SHOW_DOCUMENT ：顯示文件節點。
- NodeFilter.SHOW_DOCUMENT_TYPE ：顯示文件型別節點。
- NodeFilter.SHOW_DOCUMENT_FRAGMENT ：顯示文件片段節點。對 HTML 頁面沒有用。
- NodeFilter.SHOW_NOTATION ：顯示符號節點。對 HTML 頁面沒有用
TreeWalker
-
是更高階的一個版本，除了包括nextNode()和previousNode()在內的相同的功能之外，這個型別還提供了用於不同方向上遍歷DOM結構的方法
- parentNode() ：遍歷到當前節點的父節點；
- firstChild() ：遍歷到當前節點的第一個子節點；
- lastChild() ：遍歷到當前節點的最後一個子節點；
- nextSibling() ：遍歷到當前節點的下一個同輩節點；
- previousSibling() ：遍歷到當前節點的上一個同輩節點
範圍
DOM中的範圍
- DOM2級在Document型別中定義了createRange()方法
- 要使用範圍來選擇文件中的一部分，最簡單的方式就是使用selectNode()或selectNodeContents()這兩個方法都接收一個引數，即一個DOM節點，然後使用該節點中的資訊來填充範圍
- selectNode()方法選擇整個節點，包括其子節點，而selectNodeContents()方法則至選擇節點的子節點
- 要建立複雜的範圍就需要用setStart()和setEnd()方法，這兩個方法都接收兩個引數，一個參照節點和一個偏移量值
- 利用範圍可以刪除或複製內容，還可以像前面介紹的那樣操作範圍中的內容，使用insertNode()方法可以向範圍選區的開始處插入一個節點
-
可以使用compareBoundaryPoints()方法來確定這些範圍是否有公共的邊界，這個方法接收兩個引數，表示比較方式的常量值和要比較的範圍
- Range.START_TO_START(0) ：比較第一個範圍和第二個範圍的起點；
- Range.START_TO_END(1) ：比較第一個範圍的起點和第二個範圍的終點；
- Range.END_TO_END(2) ：比較第一個範圍和第二個範圍的終點；
- Range.END_TO_START(3) ：比較第一個範圍的終點和第一個範圍的起點。
- 可以使用cloneRange()方法複製範圍，這個方法會建立呼叫它的範圍的一個副本
- 在使用完範圍之後，最好是呼叫detach()方法，以便從建立範圍的文件中分離出該範圍。呼叫detach()之後，就可以放心地解除對範圍的引用，從而讓垃圾回收機制回收記憶體了。
IE8及更早版本中的範圍
- 選擇頁面中某一區域的最簡單方式，就是使用範圍的findText()方法，這個方法會找到第一次出現的給定文字，並將範圍移過來以環繞該文字。如果沒有找到文字，這個方法返回false；否則返回true
- IE中與DOM中的selectNode()方法最接近的方法是moveToElementText()，這個方法接受一個DOM元素，並選擇該元素的所有文字，包括HTML標籤
-
IE提供四個方法，以特定的增量向四周移動範圍：move()、moveStart()、moveEnd()、expand()，其中移動單位是下列一種字串值
- character逐個字元地移動
- word逐個單詞地移動
- sentence逐個句子地移動
- textedit移動到當前範圍選區的開始或結束位置
- 在IE中操作範圍中的內容可以使用text屬性或pasteHTML()方法，通過text屬性可以取得範圍中的內容文字，也可以通過這個屬性設定範圍中的內容文字
- IE為範圍提供collapse()方法與相應的DOM方法用法一樣，傳入true把範圍摺疊到起點，傳入false把範圍摺疊到終點
- IE中的compareEndPoints()方法與DOM範圍的compareBoundaryPoints()方法類似，這個方法接收兩個引數，比較的型別和要比較的範圍
- 在IE中使用duplicate()方法可以複製文字範圍，結果會建立原範圍的一個副本