DOM 发展历程

问题

介绍 DOM 的发展历程及各版本特点。

解答

DOM Level 0

非 W3C 正式标准，是 Netscape 和 IE 早期实现的基础 DOM 功能。

// 只能访问表单、图片、链接等有限元素
document.forms[0]
document.images[0]
document.links[0]

DOM Level 1（1998）

W3C 发布的第一个正式标准，分为两部分：

• DOM Core：定义文档结构的基本接口
• DOM HTML：针对 HTML 文档的扩展

// 新增节点操作方法
document.getElementById('app')
document.createElement('div')
element.appendChild(child)
element.removeChild(child)
element.getAttribute('id')
element.setAttribute('class', 'active')

DOM Level 2（2000）

引入命名空间支持，新增多个模块：

// DOM Events - 事件模型
element.addEventListener('click', handler, false)
element.removeEventListener('click', handler)
event.stopPropagation()
event.preventDefault()

// DOM Style - 样式操作
element.style.backgroundColor = 'red'
window.getComputedStyle(element)

// DOM Traversal - 遍历
document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT)
document.createNodeIterator(root, NodeFilter.SHOW_TEXT)

// DOM Range - 范围选择
const range = document.createRange()
range.selectNode(element)

DOM Level 3（2004）

增强文档加载、验证和键盘事件：

// 键盘事件增强
element.addEventListener('keydown', (e) => {
  console.log(e.key)      // 按键值
  console.log(e.code)     // 物理按键
})

// XPath 支持
document.evaluate(
  '//div[@class="item"]',
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
)

// 文本内容操作
element.textContent = 'Hello'

DOM Level 4 / Living Standard（2015 至今）

W3C 与 WHATWG 合并维护，采用持续更新模式：

// 新增查询方法
document.querySelector('.item')
document.querySelectorAll('.item')
element.closest('.parent')
element.matches('.active')

// 新增插入方法
element.append(child1, child2, 'text')
element.prepend(child)
element.before(sibling)
element.after(sibling)
element.replaceWith(newElement)
element.remove()

// classList 操作
element.classList.add('active')
element.classList.remove('active')
element.classList.toggle('active')
element.classList.contains('active')

// dataset 属性
element.dataset.userId = '123'  // data-user-id="123"

// MutationObserver 监听 DOM 变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(m => console.log(m.type))
})
observer.observe(element, { childList: true, subtree: true })

关键点

• Level 0 是浏览器厂商的早期实现，非正式标准
• Level 1 确立了节点树模型和基本操作 API
• Level 2 引入事件模型、样式操作、遍历和范围
• Level 3 增强键盘事件和 XPath 支持
• Level 4 采用 Living Standard 模式，持续演进，新增 querySelector、classList 等现代 API