JavaScript学习-DOM2和DOM3的变化

来源：互联网发布：云计算服务器价格编辑：程序博客网时间：2024/05/19 07:11

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。

0 0