前端 DOM1-4：DOM 标准的演进过程

原创于 2025-02-26 10:47:34 发布 · 796 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

在前端开发中，DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析成的一个树状结构，开发者可以通过 JavaScript 操作 DOM 来实现动态修改页面内容、结构和样式。

而DOM1-4并不是具体的 API 或技术，而是对DOM 发展历史的不同阶段的概括性描述，它们代表了 DOM 标准的演进过程。

DOM0（非正式标准）

时间：1990 年代中期（Netscape Navigator 和 Internet Explorer 时代）。
特点：
- DOM0 并不是一个正式的标准，而是对早期浏览器支持的 JavaScript 操作 HTML 的方式的统称。
- 主要通过内联事件处理（如 onclick、onload 等）和直接访问文档元素来实现交互。
- 示例：
```
// DOM0 事件绑定
document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};
```
- 缺点：
  - 事件绑定方式单一，无法为一个事件绑定多个处理函数。
  - 缺乏标准化，不同浏览器的实现可能存在差异。

DOM1（正式标准）

时间：1998 年，由 W3C 发布。
特点：
- DOM1 是第一个正式的 DOM 标准，分为两个部分：
  1. Core DOM：定义了操作文档结构的通用接口（如 Node、Element、Document 等）。
  2. HTML DOM：定义了操作 HTML 文档的特定接口（如 HTMLDocument、HTMLElement 等）。
- 示例：
```
// DOM1 操作元素
var element = document.getElementById("myElement");
element.innerHTML = "Hello, DOM1!";
```
- 缺点：
  - 仍然缺乏对事件处理和样式操作的完整支持。

DOM2（扩展标准）

时间：2000 年，由 W3C 发布。
特点：
- DOM2 在 DOM1 的基础上进行了扩展，增加了许多新功能：
  1. 事件模型：引入了标准的事件处理机制（如 addEventListener 和 removeEventListener）。
  2. 样式操作：支持通过 style 属性或 CSSStyleSheet 接口操作 CSS 样式。
  3. 遍历和范围：新增了 NodeIterator 和 TreeWalker 接口，用于遍历 DOM 树。
- 示例：
```
// DOM2 事件绑定
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

// DOM2 样式操作
document.getElementById("myElement").style.color = "red";
```
- 优点：
  - 提供了更强大的事件处理和样式操作能力。
  - 标准化程度更高，减少了浏览器兼容性问题。

DOM3（进一步扩展）

时间：2004 年，由 W3C 发布。
特点：
- DOM3 在 DOM2 的基础上进一步扩展，增加了以下功能：
  1. 键盘事件：支持 keydown、keyup 等键盘事件。
  2. 内容模型：引入了 DocumentType 和 Entity 等接口，支持更复杂的文档类型。
  3. XPath：支持通过 XPath 表达式查询 DOM 节点。
  4. 序列化：支持将 DOM 树序列化为 XML 或 HTML 字符串。
- 示例：
```
// DOM3 键盘事件
document.addEventListener("keydown", function(event) {
    console.log("Key pressed: " + event.key);
});

// DOM3 序列化
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(document);
console.log(xmlString);
```
- 优点：
  - 提供了更丰富的功能和更高的灵活性。
  - 支持更复杂的文档操作和事件处理。

DOM4（现代标准）

时间：2015 年，由 WHATWG 发布。

特点：

DOM4 是当前主流的 DOM 标准，进一步简化了 API 并增加了新功能：
1. 更简洁的 API：如 Element.remove() 直接移除元素。
2. MutationObserver：用于监听 DOM 树的变化。
3. Promises：支持异步操作。

示例：

// DOM4 移除元素
document.getElementById("myElement").remove();

// DOM4 MutationObserver
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log("DOM changed!");
    });
});
observer.observe(document.body, { childList: true });