From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/mutationobserver/observe/index.html | 110 +++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/zh-cn/web/api/mutationobserver/observe/index.html (limited to 'files/zh-cn/web/api/mutationobserver/observe') diff --git a/files/zh-cn/web/api/mutationobserver/observe/index.html b/files/zh-cn/web/api/mutationobserver/observe/index.html new file mode 100644 index 0000000000..5c6f18ba94 --- /dev/null +++ b/files/zh-cn/web/api/mutationobserver/observe/index.html @@ -0,0 +1,110 @@ +--- +title: MutationObserver.observe() +slug: Web/API/MutationObserver/observe +tags: + - API + - DOM + - MutationObserver + - Node + - 参考 + - 变化 + - 方法 +translation_of: Web/API/MutationObserver/observe +--- +
{{APIRef("DOM WHATWG")}}
+ +

{{domxref("MutationObserver")}}的 observe() 方法配置了 MutationObserver 对象的回调方法以开始接收与给定选项匹配的DOM变化的通知。根据配置，观察者会观察 DOM 树中的单个 {{domxref("Node")}}，也可能会观察被指定节点的部分或者所有的子孙节点。

+ +

要停止 MutationObserver（以便不再触发它的回调方法），需要调用{{domxref("MutationObserver.disconnect()")}}方法。

+ +

语法

+ +
mutationObserver.observe(target[, options])
+
+ +

参数

+ +
+
target
+
DOM树中的一个要观察变化的DOM {{domxref("Node")}} (可能是一个{{domxref("Element")}}) , 或者是被观察的子节点树的根节点。
+
options {{optional_inline}}
+
一个可选的{{domxref("MutationObserverInit")}} 对象，此对象的配置项描述了DOM的哪些变化应该提供给当前观察者的callback。
+
+ +

返回值

+ +

undefined。

+ +

异常

+ +
+
TypeError
+
以下任一情况都会抛出异常: +
    +
  • 配置选项使得实际上不会监视任何内容（例如，如果 {{domxref("MutationObserverInit.childList")}}，{{domxref("MutationObserverInit.attributes")}} 和 {{domxref("MutationObserverInit.characterData")}} 都为 false）。
    • +
  • attributes 选项为 false（表示不监视属性更改）但是attributeOldValue 为 true 并且/或者 attributeFilter 配置存在。
    • +
  • {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} 选项为 true 但是 {{domxref("MutationObserverInit.characterData")}} 为 false（表示不跟踪字符更改）。
    • +
+
+
+ +

使用说明

+ +

复用 MutationObserver

+ +

你可以多次调用同一个 MutationObserver 对象的 observe() 方法，来观察 DOM 树中不同部分的变化，和/或不同类型的变化。有一些需要注意的注意事项：

+ + + +

当节点断开连接时继续观察节点

+ +

MutationObserver 旨在让您能够随着时间的推移观察所需的节点集，即使这些节点之间的直接连接被切断。如果你开始观察节点的子树，并且该子树的一部分被分离并移动到DOM中的其他位置，你将继续观察分离的节点段，接收与节点从原始子树分离之前相同的回调。

+ +

换句话说，在你收到有关节点从被观察子树中拆分的通知之前，你将收到有关该拆分子树及其节点的更改的通知。这可以防止你丢失在切断连接之后以及在你有机会专门开始观察已移动的节点或子树之前发生的变化。

+ +

这意味着理论上如果你跟踪描述发生的变化的{{domxref("MutationRecord")}}对象，你就可以“撤销”这些改动，将DOM恢复到初始状态。

+ +

示例

+ +

在此例子中，将为你演示如何在实例 {{domxref("MutationObserver")}} 中调用observe() 方法，一旦设置后，会传给他一个目标元素和一个 {{domxref("MutationObserverInit")}} 配置对象。

+ +
// 得到要观察的元素
+var elementToObserve = document.querySelector("#targetElementId");
+
+// 创建一个叫 `observer` 的新 `MutationObserver` 实例，
+// 并将回调函数传给它
+var observer = new MutationObserver(function() {
+    console.log('callback that runs when observer is triggered');
+});
+
+// 在 MutationObserver 实例上调用 `observe` 方法，
+// 并将要观察的元素与选项传给此方法
+observer.observe(elementToObserve, {subtree: true, childList: true});
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('DOM WHATWG', '#dom-mutationobserver-observe', 'MutationObserver.observe()')}}{{ Spec2('DOM WHATWG') }}
+ +

浏览器兼容性

+ + + +

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

-- cgit v1.2.3-54-g00ecf