From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/mutationobserver/index.html | 110 ++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/zh-cn/web/api/mutationobserver/index.html (limited to 'files/zh-cn/web/api/mutationobserver/index.html') diff --git a/files/zh-cn/web/api/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..21cd5d2ffc --- /dev/null +++ b/files/zh-cn/web/api/mutationobserver/index.html @@ -0,0 +1,110 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - Advanced + - DOM + - DOM Reference + - MutationObserver + - requestAnimationFrame + - resize +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM WHATWG")}}

+ +

{{domxref("MutationObserver")}}接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

+ +

构造函数

+ +
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。
+
+ +

方法

+ +
+
{{domxref("MutationObserver.disconnect", "disconnect()")}}
+
阻止 MutationObserver 实例继续接收的通知，直到再次调用其{{domxref("MutationObserver.observe", "observe()")}}方法，该观察者对象包含的回调函数都不会再被调用。
+
{{domxref("MutationObserver.observe", "observe()")}}
+
配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。
+
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}
+
从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到{{domxref("MutationRecord")}}对象的新{{jsxref("Array")}}中。
+
+ +

Mutation Observer & customize resize event listener & demo

+ +

https://codepen.io/webgeeker/full/YjrZgg/

+ +

示例

+ +

以下示例改编自这篇博客。

+ +
// 选择需要观察变动的节点
+const targetNode = document.getElementById('some-id');
+
+// 观察器的配置（需要观察什么变动）
+const config = { attributes: true, childList: true, subtree: true };
+
+// 当观察到变动时执行的回调函数
+const callback = function(mutationsList, observer) {
+    // Use traditional 'for loops' for IE 11
+    for(let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+            console.log('A child node has been added or removed.');
+        }
+        else if (mutation.type === 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// 创建一个观察器实例并传入回调函数
+const observer = new MutationObserver(callback);
+
+// 以上述配置开始观察目标节点
+observer.observe(targetNode, config);
+
+// 之后，可停止观察
+observer.disconnect();
+
+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }}
+ +

浏览器兼容

+ + + +

{{Compat("api.MutationObserver")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf