JavaScript学习-DOM2和DOM3的变化

1，介绍

• DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。
• DOM2和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM的某个非常具体的子集。这些模块如下。
  
• DOM3级又增加了“XPath”模块和“加载与保存”（Load and Save）模块。
• DOM2和3级的目的在于扩展DOM API，以满足操作XML的所有需求。
• “DOM2级核心”没有引入新类型，它只是在DOM1级的基础上通过增加新方法和新属性来增强了既有类型。
• “DOM3级核心”增强了既有类型，但也引入了一些新类型。
• “DOM2级视图”和”DOM2级HTML”增强既有类型。

• 可使用下列代码来确定浏览器是否支持这些DOM模块

  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 supportsDOMXML = document.implementation.hasFeature("XML","2.0");

2，针对XML命名空间的变化

• 从技术上说，HTML不支持XML命名空间，但XHTML支持XML命名空间。

• 命名空间要使用xmlns特性来指定。XHTML的命名空间是http://ww.w3.org/1999/xhtml ，在任何格式良好的XHTML页面中，都应该将其包含在元素中，如下所示

  <html xmlns="http://ww.w3.org/1999/xhtml">
      <head>
          <title>Example XHTML page</title>
      </head>
      <body>
          Hello world!
      </body>
  </html>

• 有时为了避免不同语言间的冲突，也需要使用命名空间来限定特性。如下所示

  <xhtml:html xmlns:xhtml="http://ww.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>

• 在混合使用两种语言的情况下，命名空间的用处非常大了，如下所示混合了XHTML和SVG语言的文档

  <html xmlns="http://ww.w3.org/1999/xhtml">
      <head>
          <title>Example SHTML page</title>
      </head>
      <body>
          <svg xmlns="http://ww.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>

• 使用命名空间后DOM1级方法并没有提供相关的API，“DOM2级核心”提供了特定于命名空间的版本解决了这个问题。

  1. Node类型的变化

     • 在DOM2级中，Node类型包含下列特定于命名空间的属性。

     • 以下面文档为例

       <html xmlns="http://www.w3.org/1999/xhtml">
           <head>
               <title>Example XHTML page</title>
           </head>
           <body>
               <s:svg xmlns:s="http://ww.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>

     • 当节点使用了命名空间前缀时，nodeName等于prefix+”:”+localName。
     • 对于html元素来说，localName和tagName是“html”;namespaceURI是“http://ww.w3.org/1999/xhtml ” ；prefix是null。
     • 对于元素而言，它的localName是“svg”；tagName是“s:svg”;namespaeURI是“http://www.w3.org/2000/svg ”;prefix是“s”。
     • DOM3级再次基础上更进一步，又引入了下列与命名空间有关的方法。
       
  2. Document类型的变化
     
     • 包含下列与命名空间有关的方法。
       
  3. Element类型的变化
     
     • 新增方法如下
       
  4. NamedNodeMap类型的变化
     
     • 这些方法只针对特性使用。
       

3，其他方面的变化

• 这些变化与XML命名空间无关，而是更倾向于确保API的可靠性及完整性。

• DocumentType类型的变化

  • 新增了3个属性：publicId、systemId、和internalSubset。

  • 如下示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtmll-strict.dtd"
    [<!ELEMENT name(#PCDATA)>] >

  • document.doctype.publicId是-//W3C//DTD XHTML 1.0 Strict//EN
  • document.doctype.systemId是http://www.w3.org/TR/xhtml11/DTD/xhtmll-strict.dtd
  • document.doctype.internalSubset是 <!ELEMENT name(#PCDATA)>

• Document类型的变化

  • importNode()方法
    
    • 从一个文档中取得一个节点，导入另一个文档，成为另一个文档结构的一部分。
    • 参数接收两个：要复制的节点和一个表示是否复制子节点的布尔值。
    • 返回原来节点的副本。

  • “DOM2级视图”模块增加了一个名为defaultView的属性，指向拥有给定文档的窗口（或框架），除IE外所有浏览器都支持defaultView属性，IE支持一个等价的属性名parentWidow属性，要确定文档的归属窗口，可使用下列代码

    var parentWindow = document.defaultView || document.parentWindow;

  • “DOM2级核心”为document.implementation对象规定了两个方法：
    
    • createDocumentType()和
      
      • 创建一个新的DocumentType节点。
      • 接收3个参数：文档类型名称，publicId，systemId
    • createDocument()
      
      • 接收3个参数：针对文档中元素的namespaceURI，文档元素的标签名，新文档的文档类型。
  • “DOM2级HTML”也为document.implementation新增了一个方法，名叫createHTMLDocument()。这个方法的用途是创建一个完整的HTML文档，包括html,head,title,body元素，
    
    • 接受一个参数:文档的标题

• Node类型的变化

  • isSupported()方法，与document.implementation引入的hasFeature()方法类似。

  • 代码示例

    if(document.body.isSupported("HTML","2.0")){
        // 执行
    }

  • DOM3级引入了两个辅助比较节点的方法
    
    • isSameNode()
      
      • 类型相同时返回true,反之false。
    • isEqualNode()
      
      • 引用相同节点时，返回true，否则返回false。