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①

瀏覽器相容性