第十二章：DOM2 和 DOM3（DOM变化）

来源：互联网发布：unity3d跳跃代码编辑：程序博客网时间：2024/05/26 02:55

DOM2 和 DOM3
- DOM变化
  - 针对 XML 命名空间的变化
    - Node 类型的变化
    - Document 类型的变化
    - Element 类型的变化
    - NameNodeMap 类型的变化
  - 其他方面的变化
    - DocumentType 类型的变化
    - Document 类型的变化
    - Node类型的变化
    - 框架的变化

DOM2 和 DOM3

DOM1 级主要定义的是XML和HTML文档的底层结构。DOM2 级和DOM3 级则在这个结构的基础上引入了更多的交互能力，也支持更高级的XML特性。DOM2 级和DOM3 级分为许多模块：
1. DOM2 级核心（DOM Level 2 Core）在1级核心基础上构建，为节点添加了更多方法和属性。
2. DOM2 级视图（DOM Level 2 Views）为文档定义了基于样式信息的不同视图。
3. DOM2 级事件（DOM Level 2 Events）说明了如何使用事件与DOM文档交互。
4. DOM2 级样式（DOM Level 2 Style）定义了如何以编程方式来访问和改变CSS样式信息。
5. DOM2 级遍历和范围（DOM Level 2 Traversal and Range）引入了遍历DOM文档和选择其特定部分的新接口。
6. DOM2 级HTML（DOM Level 2 HTML）在1级HTML基础上构建，添加了更多属性、方法和新接口。
DOM3 级又增加了”XPath”模块和”加载与保存”（Load and Save）模块。这部分会在第十八章讨论。

DOM变化

DOM2 级和3 级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。DOM Level 2 Core没有引入新类型，只是在DOM Level 1 Core的基础上通过添加新方法和属性来增强既有类型。DOM Level 3 Core同样增强了既有类型，但也引入了新类型。
类似的DOM Level 2 View和DOM Level 2 HTML也增强了DOM接口，提供了新的属性和方法。可以通过下面的代码确定浏览器是否支持这些DOM模块。

    var supportDOM2Core = document.implementation.hasFeature("Core", "2.0");    var supportDOM3Core = document.implementation.hasFeature("Core", "3.0");    var supportDOM2HTML = document.implementation.hasFeature("HTML", "2.0");    var supportDOM2Views = document.implementation.hasFeature("Views", "2.0");    var supportDOM2XML = document.implementation.hasFeature("XML", "2.0");    console.log("supportDOM2Core="+supportDOM2Core);    console.log("supportDOM3Core="+supportDOM3Core);    console.log("supportDOM2HTML="+supportDOM2HTML);    console.log("supportDOM2Views="+supportDOM2Views);    console.log("supportDOM2XML="+supportDOM2XML);

在IE8 里都是false，在IE 9里supportDOM3Core是false，其余是true。

针对 XML 命名空间的变化

Node 类型的变化

直接上代码

<html xmlns="http://www.w3.org/1999/xhtml">    <head>        <title>Example XHTML page</title>        <script type="text/javascript"><![CDATA[            function getElementInfo(){                var html = document.documentElement;                var svg = document.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg")[0];                alert(html.namespaceURI);//"http://www.w3.org/1999/xhtml"                alert(html.prefix);//null                alert(html.localName);//html                alert(html.tagName);//html                alert(svg.namespaceURI);//"http://www.w3.org/2000/svg"                alert(svg.prefix);//s                alert(svg.localName);//svg                alert(svg.tagName);//s:svg            }        ]]></script>    </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%" onclick="getElementInfo()">            <s:rect x="0" y="0" width="100" height="100" style="fill:red" />         </s:svg>    </body></html>

DOM2 级下Node类型新增属性
1. localName：不带命名空间前缀的节点名称
2. namespaceURI：命名空间URI或者null
3. prefix：命名空间前缀或者null
DOM3 级下Node类型增加的方法
1. isDefaultNamespace(namespaceURI)
2. lookupNamespaceURI(prefix)
3. lookupPrefix(namespaceURI)

Document 类型的变化

DOM2 级Document类型的新方法
1. createElementNS(namespaceURI, tagName)
2. createAttributeNS(namespaceURI, attributeName)
3. getElementsByTagNameNS(namespaceURI, tagName) 返回属于命名空间namespaceURI的tagName元素的NodeList。
只有在文档中存在两个或多个命名空间时，这些方法才是必需的。

Element 类型的变化

DOM2 级核心关于Element类型新增方法如下
1. getAttributeNS(namespaceURI, localName)取得属于命名空间namespaceURI且名为localName的特性值。
2. getAttributeNodeNS(namespaceURI, localName)取得属于命名空间namespaceURI且名为localName的特性节点。
3. hasAttributeNS(namespaceURI, localName)，注意DOM Level 2 Core增加了一个方法hasAttribute()用于判断Element是否有传入的特性。
4. removeAttributeNS(namespaceURI, localName)
5. setAttributeNS(namespaceURI, qualifiedName,value)
6. setAttributeNodeNS(attNode)

NameNodeMap 类型的变化

还记得特性是通过NameNodeMap表示的吗？下面的这些新方法多数情况下只针对特性使用
1. getNamedItemNS(namespaceURI, localName)
2. removeNamedItemNS(namespaceURI, localName)
3. setNamedItemNS(node)
由于一般是通过元素访问特性，所以这些方法很少使用。

其他方面的变化

DocumentType 类型的变化

DocumentType类型新增了3个属性：publicId，systemId和internalSubset。其中前两个属性表示的是文档类型声明中的两个信息段。这在DOM1 级中是没有办法访问到的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"//document.doctype.publicId       "http://www.w3.org/TR/html4/strict.dtd"//document.doctype.systemId       [<!ELEMENT name (#PCDATA)>] >//document.doctype.internalSubset

Document 类型的变化

增加了一个importNode()方法。这个方法的用途是从一个文档中取得一个节点，将其导入另一个文档，使其成为这个文档结构的一部分。需要注意的是，每个节点都有一个ownDocument属性，表示所属的文档。如果调用appendChild()时传入的节点属于不同的文档（ownDocument属性不同），则会导致错误。
DOM Level 2 Views添加了一个名为defaultView属性，除IE外的浏览器都支持该属性。该属性指向给定文档的窗口或框架（Window类型）。
另外DOM Level 2 Core还为document.implementation规定了2个新方法：createDocumentType()和createDocument()。
createDocumentType()用来创建DocumentType节点，接收3个参数：文档类型名称、publicId、systemId。由于既有文档的文档类型不可变，因此createDocumentType()只能在创建新文档时使用。
创建新的文档要用createDocument()，该方法接收三个参数，针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型。
DOM Level 2 HTML也为document.implementation新增了一个方法，createHTMLDocument()。这个方法的用途是创建一个完整的HTML文档，包括<html><head><title><body>元素。这个方法只接受一个参数，即新创建文档的标题。

Node类型的变化

添加了isSupported()方法，这个方法与DOM 1级为document.implementation引入的hasFeature()方法类似，isSupported()方法用于确定当前节点具有什么能力。
DOM 3级引入了2个辅助比较节点的方法：isSameNode()和isEqualNode()。前者比较两个节点是不是同一个对象，后者则是比较两个节点是否具有相同的类型，相等的属性，attributes和childNodes也相等。

    var div1 = document.createElement("div");    div1.setAttribute("class", "box");    var div2 = document.createElement("div");    div2.setAttribute("class", "box");    alert(div1.isSameNode(div2));//false    alert(div1.isEqualNode(div2));//true

DOM 3级还针对DOM节点添加额外数据引入了新方法。setUserData()方法和getUserData()方法。

    var div = document.createElement("div");    //该方法接收3个参数，key，value和一个function    //function会在节点被复制、删除、重命名或引入一个文档时调用    // 参数介绍 operation（1：复制 2：导入 3：删除 4：重命名）    // 参数介绍 key：数据建 value：数据值 src：源节点 dest：目标节点    div.setUserData("name", "Nicholas", function(operation, key, value, src, dest){        if (operation == 1){            alert("name");            dest.setUserData(key, value, function(){});        }    });    var newDiv = div.cloneNode(true);    alert(newDiv.getUserData("name"));    //"Nicholas" 我的Chrome不识别setUserData方法

框架的变化

框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示，他们在DOM 2级都有一个新属性，名叫contentDocument。这个属性包含一个指针，指向表示框架内容的文档对象。在此之前，无法直接通过元素取得这个文档对象（只能用frames集合）。

    <iframe id="myIFrame" src="javascript:false"></iframe>    <script type="text/javascript">        var iframe = document.getElementById("myIFrame");        var iframeDoc = iframe.contentDocument;   //won't work in IE < 8        alert(iframeDoc);    </script>

Opera、Firefox、Safari和Chrome都支持该属性。IE 8之前虽然不支持框架中的contentDocument属性，但支持一个名叫contentWindow(所有浏览器都支持)的属性，该属性返回框架的window对象，而这个window对象下有一个document属性。

    var iframe = document.getElementById("myIframe");    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;    alert(iframeDoc);

0 0