这是我参与更文挑战的第6天，活动详情查看：更文挑战

前两篇 系统学习DOM（一）、系统学习DOM（二） 主要介绍的是 DOM1 级别节点类型和常用 API，DOM2、DOM3 则在此基础上引入了更多交互能力，并支持更高级 XML 特性。但是除事件外，大多 DOM2、DOM3 的 API 并不常用，因此这里也只是做简要介绍。

一、DOM 变化

为了对 DOM 增删改查更好的支持，DOM2、DOM3 对于已有类型新增了属性和方法，例如：

• xmlns：支持命名空间（严格是 XHTML 支持命名空间），常见场景是在 HTML 里插入 SVG
• createElementNS：创建一个属于命名空间的新元素
• getElementsByTagNameNS：返回属于命名空间和 tagName 的元素列表（NodeList）
• isSupport：确定当前节点是否具有某特性，和 DOM1 document.implementation.hasFeature() 类似，例如：

if (document.body.isSupported("HTML", "2.0")){
  // 执行只有“DOM2 级 HTML”才支持的操作
}

• contentDocument：引用 iframe 中的 document
• 其他不再列出

二、样式

主要针对外部、内部、内联这三种 CSS 机制提供了一套 API。

• getComputedStyle：获取计算样式，即多个样式下最终生效的样式
• offsetXXX：元素偏移量，如下：

• clientXXX：元素客户区大小，如下：

• scrollXXX：滚动大小，如下：

三、遍历

• NodeIterator/TreeWalker：辅助对 DOM 进行 DFS 遍历

四、范围

DOM2 还定义了“范围”（range）接口，在常规 DOM 操作不能有效修改文档时，方便实现。

• createRange：创建 DOM range
• 不常用，不再细述具体用法

DOM2、DOM3 在 DOM1 基础上，添加了很多操作 DOM 的方法，这些方法在做底层开发（如编辑器等）会非常有用，但是在业务开发中用处不多，我们大概了解其全貌即可。