DOM 的级别分类

Posted 2023-05-03

参考技术A 关于 DOM 的几个级别，实际上是由 W3C 标准，W3C就是 world wide web consortium 的缩写，中文翻译过来就是万维网联盟，是web技术领域最具有权威和影响力的国际中立性技术标准机构，具体就不展示了。

其中 DOM 就是标准之一：DOM 分为三个级别：DOM1级、DOM2级、DOM3级。

那 DOM 具体是什么东西呢？DOM 其实是文档对象模型（document object model）的缩写，它是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指javascript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。

DOM 1级（DOM Level 1）于1998年10月成为 W3C 的推荐标准，DOM1级由两个模块组成：DOM核心（DOM Core）和 DOM HTML，DOM Core 能映射以XML为基础的文档结构，允许获取和操作文档的任意部分，而DOM HTML 通过添加 HTML 专用的对象与函数对 DOM Core 进行了扩展。简单说，DOM1级就是映射文档结构和提供基本的文档操作方法。

DOM2级，就是对DOM1级进行扩展，2级DOM通过对象接口增加对鼠标和用户界面事件、范围、遍历和重叠样式表（CSS）的支持。同时也对DOM1进行了扩展，从而可支持XML命名空间。简单来说，DOM2级就是在DOM1的基础上增加了视图、事件、样式、遍历和范围的接口，和支持XML命名空间。

DOM3级，在前面DOM基础上，引入了以统一方式加载和保存文档的方法，新增了验证文档的方法，同时也对DOM核心进行了扩展，开始支持XML1.0规范。

除了上面的三个等级之外，还有一个叫DOM0级的东西，实际上标准并没有这个东西，它指的是IE4和Netscape Navigator 4.0 最初支持的DHTML，DHTML实际上是HTML、CSS和JS的一个集成，代表的是一种已有的技术，不是标椎，所以DOM0级其实代表的是历史节点中未形成标准的一个初期产物。

举一个常见的DOM0级事件和DOM2级事件的比较：绑定按钮的onclick赋值为一个函数就是DOM0级的，但是onclick多次赋值不同函数，最后也会被后面的函数覆盖掉；而DOM2级利用提供的addEventListener方法监听按钮的click事件，多次写监听同一个事件，函数会被依次执行的，不会被覆盖。

为啥在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？

【中文标题】为啥在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？

【英文标题】：Why is the DOMSubtreeModified event deprecated in DOM level 3?为什么在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？

【发布时间】：2011-10-03 07:58:04

【问题描述】：

为什么是 DOMSubtreeModified 事件 deprecated 而我们应该使用什么来代替？

【参考方案1】：

如果你scroll down a bit，你会看到：

警告！ MutationEvent 接口是在 DOM Level 2 中引入的 事件，但尚未完全且可互操作地实施 跨用户代理。此外，也有人批评说 按照设计，接口引入了性能和实现 挑战。一个新的规范正在开发中，目的是 解决突变事件解决的用例，但在更多 高性能的方式。因此，本规范描述了突变事件 用于参考和遗留行为的完整性，但不推荐使用 使用MutationEvent 接口和MutationNameEvent 界面。

替换 API 是 mutation observers，它完全指定了 in the DOM Living Standard，它取代了所有 DOM 级别的 X 愚蠢。

【讨论】：

@TJ - 没有失望。上面的一个是DOMNodeRemovedFromDocument。 :-)

替换将出现在 DOM Level 4 dvcs.w3.org/hg/domcore/raw-file/tip/… 中，Chromium 似乎有一些进展bugs.webkit.org/show_bug.cgi?id=73851

替换MutationEvent 接口的好方法是animationStart and some CSS。

animationStart 的问题，它只适用于节点的插入。不适用于节点删除、属性编辑或文本更改。它也是单节点的，DOMSubtreeModified 允许从根节点观察整个树。

【参考方案2】：

我认为替代者将是突变观察者：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

var whatToObserve = childList: true, attributes: true, subtree: true, attributeOldValue: true, attributeFilter: ['class', 'style'];
var mutationObserver = new MutationObserver(function(mutationRecords) 
  $.each(mutationRecords, function(index, mutationRecord) 
    if (mutationRecord.type === 'childList') 
      if (mutationRecord.addedNodes.length > 0) 
        //DOM node added, do something
      
      else if (mutationRecord.removedNodes.length > 0) 
        //DOM node removed, do something
      
    
    else if (mutationRecord.type === 'attributes') 
      if (mutationRecord.attributeName === 'class') 
        //class changed, do something
      
    
  );
);
mutationObserver.observe(document.body, whatToObserve);