【JavaScript 教程】DOM——Mutation Observer AP

作者: seo 分类: 雷竞技 发布时间: 2019-07-03 13:09

  Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。

  概念上,它很接近事件,可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是,它与事件有一个本质不同:事件是同步触发,也就是说,DOM 的变动立刻会触发相应的事件;Mutation Observer 则是异步触发,DOM 的变动并不会马上触发,而是要等到当前所有 DOM 操作都结束才触发。

  这样设计是为了应付 DOM 变动频繁的特点。举例来说,如果文档中连续插入1000个p元素,就会连续触发1000个插入事件,执行每个事件的回调函数,这很可能造成浏览器的卡顿;而 Mutation Observer 完全不同,只在1000个段落都插入结束后才会触发,而且只触发一次。

  使用时,首先使用MutationObserver构造函数,新建一个观察器实例,同时指定这个实例的回调函数。

  上面代码中的回调函数,会在每次 DOM 变动后调用。该回调函数接受两个参数,第一个是变动数组,第二个是观察器实例,下面是一个例子。

  上面代码中,observe方法接受两个参数,第一个是所要观察的DOM元素是article,第二个是所要观察的变动类型(子节点变动和属性变动)。

  想要观察哪一种变动类型,就在option对象中指定它的值为true。需要注意的是,必须同时指定childList、attributes和characterData中的一种或多种,若未均指定将报错。

  对一个节点添加观察器,就像使用addEventListener方法一样,多次添加同一个观察器是无效的,回调函数依然只会触发一次。但是,如果指定不同的options对象,就会被当作两个不同的观察器。

  takeRecords方法用来清除变动记录,即不再处理未处理的变动。该方法返回变动记录的数组。

  DOM 每次发生变化,就会生成一条变动记录(MutationRecord 实例)。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

  上面代码的观察器,观察body的所有下级节点(childList表示观察子节点,subtree表示观察后代节点)的变动。回调函数会在控制台显示所有变动的类型和目标节点。

  上面代码先设定追踪属性变动(attributes: true),然后设定记录变动前的值。实际发生变动时,会将变动前的值显示在控制台。

  网页加载的时候,DOM 节点的生成会产生变动记录,因此只要观察 DOM 的变动,就能在第一时间触发相关事件,因此也就没有必要使用DOMContentLoaded事件。

  上面代码中,监听document.documentElement(即HTML节点)的子节点的变动,subtree属性指定监听还包括后代节点。因此,任意一个网页元素一旦生成,就能立刻被监听到。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!