MutationObserver: takeRecords() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

MutationObserver 方法 takeRecords() 返回一个列表,其中包含所有已检测到但尚未由观察者回调函数处理的匹配 DOM 更改,同时清空突变队列。

最常见的用例是在断开观察者连接之前立即获取所有待处理的突变记录,以便在关闭观察者时可以处理任何待处理的突变。

语法

js
takeRecords()

参数

无。

返回值

一个 MutationRecord 对象数组,每个对象描述应用于文档 DOM 树被观察部分的某一项更改。

注意: 调用 takeRecords() 后,已发生但尚未传递给观察者回调的突变队列将清空。

示例

在此示例中,我们演示了如何通过在断开观察者连接之前调用 takeRecords() 来处理任何未传递的 MutationRecord

js
const targetNode = document.querySelector("#someElement");
const observerOptions = {
  childList: true,
  attributes: true,
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

/* later, when it's time to stop observing… */

/* handle any still-pending mutations */

let mutations = observer.takeRecords();

observer.disconnect();

if (mutations.length > 0) {
  callback(mutations);
}

代码获取所有未处理的突变记录,然后使用这些记录调用回调函数,以便对其进行处理。这在调用 disconnect() 以停止观察 DOM 之前立即完成。

规范

规范
DOM
# ref-for-dom-mutationobserver-takerecords①

浏览器兼容性