DOM的级别问题

Posted 2023-05-08

DOM分一级，二级。我想知道他是怎么分的？不用引用别人的东西，那样太多我看不完，说说自己的想法就行。

如果水平不高说自己的想法会误导你的。下面的这个解释很容易理解。主要还是自己能写一下程序。
从 DOM Level 1 开始，DOM API 包含了一些接口，用于表示可从 XML 文档中找到的所有不同类型的信息。它还包含使用这些对象所必需的方法和属性。

Level 1 包括对 XML 1.0 和 html 的支持，每个 HTML 元素被表示为一个接口。它包括用于添加、编辑、移动和读取节点中包含的信息的方法等等。然而，它没有包括对 XML 名称空间（XML Namespace）的支持，XML 名称空间提供分割文档中的信息的能力。

DOM Level 2 添加了名称空间支持。Level 2 扩展了 Level 1，允许开发人员检测和使用可能适用于某个节点的名称空间信息。Level 2 还增加了几个新的模块，以支持级联样式表、事件和增强的树操作。 参考技术A dom 0:传统js对象模型.支持常用的form[]等形式
dom 1:通过一套常用的函数集，提过操作一个文档中所有元素的能力。提供类似document.all[]集合的操作.但是是跨越浏览器兼容和标准化的.
dom 3:提供主要与xml相关的页面元素的更多的访问，组合了dom0和dom1，同时支持对css的访问和操作，还增加了高级事件模型，以及扩充的能力。例如遍历和范围操作。但是dom2的很多功能还不被一般的浏览器支持.

为啥在 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);