JavaScript学习-DOM2和DOM3的变化_以下node 类型属性在dom2级时候包含的是-优快云博客

本文链接：https://blog.youkuaiyun.com/theroadofprogrammers/article/details/71774294

本文详细介绍了DOM2和DOM3级的主要变化，包括针对XML命名空间的支持、DOM对象模型的增强，以及新增的API方法。此外还讨论了如何在不同浏览器中检测DOM支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。