《Javascript 高階程式設計(第三版)》筆記0x13 DOM2和DOM3：DOM變化
目錄
DOM1 級主要定義的是 HTML 和 XML 文件的底層結構。 DOM2 和 DOM3 級則在這個結構的基礎上引入了更多的互動能力，也支援了更高階的 XML 特性。為此， 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 基礎上構建，添加了更多屬性、方法和新介面。
DOM變化
DOM2 級和 3 級的目的在於擴充套件 DOM API，以滿足操作 XML 的所有需求，同時提供更好的錯誤處理及特性檢測能力。從某種意義上講，實現這一目的很大程度意味著對名稱空間的支援。“DOM2 級核心”沒有引入新型別，它只是在 DOM1 級的基礎上通過增加新方法和新屬性來增強了既有型別。“DOM3級核心”同樣增強了既有型別，但也引入了一些新型別。
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 文件的元素就可以混合在一起，共同構成格式良好的文件，而不必擔心發生命名衝突。從技術上說， HTML 不支援 XML 名稱空間，但 XHTML 支援 XML 名稱空間。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
Hello world!
</body>
</html>想明確地為 XML名稱空間建立字首，可以使用 xmlns 後跟冒號，再後跟字首。
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:head>
<xhtml:title>Example XHTML page</xhtml:title>
</xhtml:head>
<xhtml:body xhtml:class="home">
Hello world!
</xhtml:body>
</xhtml:html>在混合使用兩種語言的情況下，名稱空間的用處就非常大了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" style="width:100%; height:100%">
<rect x="0" y="0" width="100" height="100" style="fill:red"/>
</svg>
</body>
</html>Node 型別的變化
在 DOM2 級中， Node 型別包含下列特定於名稱空間的屬性。
localName：不帶名稱空間字首的節點名稱。
namespaceURI：名稱空間 URI 或者（在未指定的情況下是） null。
prefix：名稱空間字首或者（在未指定的情況下是） null。
<!--當節點使用了名稱空間字首時，其 nodeName 等於 prefix+":"+ localName。-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" style="width:100%; height:100%">
<s:rect x="0" y="0" width="100" height="100" style="fill:red"/>
</s:svg>
</body>
</html>DOM3 級又引入了下列與名稱空間有關的方法
isDefaultNamespace(namespaceURI)：在指定的 namespaceURI 是當前節點的預設名稱空間的情況下返回 true。
lookupNamespaceURI(prefix)：返回給定 prefix 的名稱空間。
lookupPrefix(namespaceURI)：返回給定 namespaceURI 的字首。
alert(document.body.isDefaultNamespace("http://www.w3.org/1999/xhtml"); //true
//假設 svg 中包含著對<s:svg>的引用
alert(svg.lookupPrefix("http://www.w3.org/2000/svg")); //"s"
alert(svg.lookupNamespaceURI("s")); //"http://www.w3.org/2000/svg"Document 型別的變化
//建立一個新的 SVG 元素
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
//建立一個屬於某個名稱空間的新特性
var att = document.createAttributeNS("http://www.somewhere.com", "random");
//取得所有 XHTML 元素
var elems = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "*");Element 型別的變化
“DOM2 級核心”中有關 Element 的變化，主要涉及操作特性。新增的方法如下。
getAttributeNS(namespaceURI,localName)：取得屬於名稱空間 namespaceURI 且名為localName 的特性。
getAttributeNodeNS(namespaceURI,localName)：取得屬於名稱空間 namespaceURI 且名為 localName 的特性節點。
getElementsByTagNameNS(namespaceURI, tagName)：返回屬於名稱空間 namespaceURI的 tagName 元素的 NodeList。
hasAttributeNS(namespaceURI,localName)：確定當前元素是否有一個名為 localName的特性，而且該特性的名稱空間是 namespaceURI。注意，“DOM2 級核心”也增加了一個hasAttribute()方法，用於不考慮名稱空間的情況。
removeAttriubteNS(namespaceURI,localName)：刪除屬於名稱空間 namespaceURI 且名為 localName 的特性。
setAttributeNS(namespaceURI,qualifiedName,value)：設定屬於名稱空間 namespaceURI 且名為 qualifiedName 的特性的值為 value。
setAttributeNodeNS(attNode)：設定屬於名稱空間 namespaceURI 的特性節點。
NamedNodeMap 型別的變化
getNamedItemNS(namespaceURI,localName)：取得屬於名稱空間 namespaceURI 且名為localName 的項。
removeNamedItemNS(namespaceURI,localName)：移除屬於名稱空間 namespaceURI 且名為 localName 的項。
setNamedItemNS(node)：新增 node，這個節點已經事先指定了名稱空間資訊。
其他方面的變化
DocumentType 型別的變化
DocumentType 型別新增了 3 個屬性： publicId、 systemId 和 internalSubset。其中，前兩個屬性表示的是文件型別宣告中的兩個資訊段，這兩個資訊段在 DOM1 級中是沒有辦法訪問到的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--publicId 是"-//W3C//DTD HTML 4.01//EN"，而 systemId 是"http://www.w3.org/TR/html4/strict.dtd"。-->Document 型別的變化
Document 型別的變化中唯一與名稱空間無關的方法是 importNode()。
var newNode = document.importNode(oldNode, true); //匯入節點及其所有子節點
document.body.appendChild(newNode);“DOM2 級檢視”模組添加了一個名為 defaultView 的屬性，其中儲存著一個指標，指向擁有給定文件的視窗（或框架）。
var parentWindow = document.defaultView || document.parentWindow;“DOM2 級核心”還為 document.implementation 物件規定了兩個新方法： createDocumentType()和 createDocument()。
var doctype = document.implementation.createDocumentType("html",
" -//W3C//DTD XHTML 1.0 Strict//EN",
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd");
var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml",
"html", doctype);“DOM2 級 HTML”模組也為 document.implementation 新增了一個方法，名叫 createHTMLDocument()。
/*這個方法的用途是建立一個完整的 HTML 文件，包括<html>、 <head>、 <title>和<body>元素。
這個方法只接受一個引數，即新建立文件的標題（放在<title>元素中的字串），返回新的 HTML 文件*/
var htmldoc = document.implementation.createHTMLDocument("New Doc");
alert(htmldoc.title); //"New Doc"
alert(typeof htmldoc.body); //"object"Node 型別的變化
Node 型別中唯一與名稱空間無關的變化，就是添加了 isSupported()方法。
if (document.body.isSupported("HTML", "2.0")){
//執行只有"DOM2 級 HTML"才支援的操作
}DOM3 級引入了兩個輔助比較節點的方法： isSameNode()和 isEqualNode()。
var div1 = document.createElement("div");
div1.setAttribute("class", "box");
var div2 = document.createElement("div");
div2.setAttribute("class", "box");
alert(div1.isSameNode(div1)); //true
alert(div1.isEqualNode(div2)); //true
alert(div1.isSameNode(div2)); //falseDOM3 級還針對為 DOM 節點新增額外資料引入了新方法。其中， setUserData()方法會將資料指定給節點，它接受 3 個引數：要設定的鍵、實際的資料（可以是任何資料型別）和處理函式。使用 getUserData()並傳入相同的鍵，就可以取得該資料。
var div = document.createElement("div");
div.setUserData("name", "Nicholas", function(operation, key, value, src, dest){
if (operation == 1){
dest.setUserData(key, value, function(){}); }
});
var newDiv = div.cloneNode(true);
alert(newDiv.getUserData("name")); //"Nicholas"框架的變化
框架和內嵌框架分別用 HTMLFrameElement 和 HTMLIFrameElement 表示，它們在 DOM2 級中都有了一個新屬性，名叫 contentDocument。這個屬性包含一個指標，指向表示框架內容的文件物件。在此之前，無法直接通過元素取得這個文件物件（只能使用 frames 集合）。
var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;