MutationObserver.takeRecords()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

MutationObserver 的 takeRecords() 方法返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表，使变更队列保持为空。此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。

语法

js
takeRecords()

参数

无。

返回值

返回一个MutationRecord 对象列表，每个对象都描述了应用于 DOM 树某部分的一次改动。

备注： 调用 takeRecords() 后，已发生但未传递给回调的变更队列将保留为空。

示例

下面的示例展示了在断开观察者之前如何通过调用 takeRecords() 来处理任何未传递的 MutationRecord。

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

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

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

/* handle any still-pending mutations */

var mutations = observer.takeRecords();

if (mutations) {
  callback(mutations);
}

observer.disconnect();

代码中第 12-17 行抓取了所有未处理的变更记录，然后调用回调，并将变更记录列表传递给回调，以保证所有变更记录都被处理。这是在调用 disconnect() 之前完成的，以便停止观察 DOM。

规范

Specification
DOM Standard
# ref-for-dom-mutationobserver-takerecords①

浏览器兼容性

BCD tables only load in the browser