From ac2d75000ba46ed7f7b7cc4b398d638b42fccd99 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sat, 28 May 2022 16:32:35 +0800 Subject: [PATCH 01/15] AutoCorrect files/zh-cn/web/api/m*/ --- files/zh-cn/web/api/messagechannel/index.html | 12 ++++++------ .../zh-cn/web/api/messagechannel/port1/index.html | 6 +++--- .../zh-cn/web/api/messagechannel/port2/index.html | 4 ++-- files/zh-cn/web/api/messageevent/index.html | 14 +++++++------- .../web/api/messageevent/messageevent/index.html | 14 +++++++------- .../web/api/messageport/message_event/index.html | 2 +- files/zh-cn/web/api/mimetype/index.html | 4 ++-- files/zh-cn/web/api/mousescrollevent/index.html | 12 ++++++------ .../web/api/mutationobserver/disconnect/index.html | 4 ++-- files/zh-cn/web/api/mutationobserver/index.html | 8 ++++---- .../mutationobserver/mutationobserver/index.html | 2 +- .../web/api/mutationobserver/observe/index.html | 12 ++++++------ .../api/mutationobserver/takerecords/index.html | 8 ++++---- 13 files changed, 51 insertions(+), 51 deletions(-) diff --git a/files/zh-cn/web/api/messagechannel/index.html b/files/zh-cn/web/api/messagechannel/index.html index 47cb52146faf73..3bc7d5482cb713 100644 --- a/files/zh-cn/web/api/messagechannel/index.html +++ b/files/zh-cn/web/api/messagechannel/index.html @@ -12,7 +12,7 @@ ---

{{APIRef("HTML DOM")}}

-

Channel Messaging API的MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个{{domxref("MessagePort")}} 属性发送数据。

+

Channel Messaging API 的MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个{{domxref("MessagePort")}} 属性发送数据。

{{AvailableInWorkers}}

@@ -20,9 +20,9 @@

属性

{{domxref("MessageChannel.port1")}} {{readonlyInline}}
-
返回channel的port1。
+
返回 channel 的 port1。
{{domxref("MessageChannel.port2")}} {{readonlyInline}}
-
返回channel的port2。
+
返回 channel 的 port2。

构造函数

@@ -30,13 +30,13 @@

构造函数

{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}
-

返回一个带有两个MessagePort属性的MessageChannel新对象。

+

返回一个带有两个 MessagePort 属性的 MessageChannel 新对象。

示例

-

在以下代码块中,您可以看到使用MessageChannel构造函数实例化了一个channel对象。当iframe加载完毕,我们使用MessagePort.postMessage方法把一条消息和MessageChannel.port2传递给iframe。handleMessage处理程序将会从iframe中(使用MessagePort.onmessage监听事件)接收到信息,将数据其放入innerHTML中。

+

在以下代码块中,您可以看到使用 MessageChannel 构造函数实例化了一个 channel 对象。当 iframe 加载完毕,我们使用 MessagePort.postMessage 方法把一条消息和 MessageChannel.port2 传递给 iframe。handleMessage 处理程序将会从 iframe 中(使用 MessagePort.onmessage 监听事件)接收到信息,将数据其放入 innerHTML 中。

var channel = new MessageChannel();
 var para = document.querySelector('p');
@@ -55,7 +55,7 @@ 

示例

para.innerHTML = e.data; }
-

一个完整的运行示例,可以在Github上查看 channel messaging basic demo  (run it live too).

+

一个完整的运行示例,可以在 Github 上查看 channel messaging basic demo  (run it live too).

Specifications/规范

diff --git a/files/zh-cn/web/api/messagechannel/port1/index.html b/files/zh-cn/web/api/messagechannel/port1/index.html index 8452b93892b214..52a8489478b64d 100644 --- a/files/zh-cn/web/api/messagechannel/port1/index.html +++ b/files/zh-cn/web/api/messagechannel/port1/index.html @@ -15,11 +15,11 @@

语法

Value

-

一个 {{domxref("MessagePort")}} 对象, 通道的第一个端口,此端口连接到源上下文通道。

+

一个 {{domxref("MessagePort")}} 对象,通道的第一个端口,此端口连接到源上下文通道。

示例

-

在以下代码块中,您可以看到使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}构造函数创建的新通道。当{{HTMLElement("iframe")}}加载完毕,我们使用{{domxref("MessagePort.postMessage")}}方法把一条消息和{{domxref("MessageChannel.port2")}}传递给{{HTMLElement("iframe")}}。handleMessage处理程序将会从<iframe>中(使用{{domxref("MessagePort.onmessage")}}监听事件)接收到信息,将数据其放入一个段落。handleMessage 方法关联到 port1用于监听收到的消息。

+

在以下代码块中,您可以看到使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}构造函数创建的新通道。当{{HTMLElement("iframe")}}加载完毕,我们使用{{domxref("MessagePort.postMessage")}}方法把一条消息和{{domxref("MessageChannel.port2")}}传递给{{HTMLElement("iframe")}}。handleMessage 处理程序将会从<iframe>中(使用{{domxref("MessagePort.onmessage")}}监听事件)接收到信息,将数据其放入一个段落。handleMessage 方法关联到 port1 用于监听收到的消息。

var channel = new MessageChannel();
 var para = document.querySelector('p');
@@ -39,7 +39,7 @@ 

示例

}
-

一个完整的运行示例,可以在Github上查看 channel messaging basic demo  (run it live too).

+

一个完整的运行示例,可以在 Github 上查看 channel messaging basic demo  (run it live too).

规范

diff --git a/files/zh-cn/web/api/messagechannel/port2/index.html b/files/zh-cn/web/api/messagechannel/port2/index.html index 2d79fb1663a0a9..3b244d70aaccfd 100644 --- a/files/zh-cn/web/api/messagechannel/port2/index.html +++ b/files/zh-cn/web/api/messagechannel/port2/index.html @@ -21,7 +21,7 @@

示例

-

如下代码所示,通过{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}}构造函数创建了一个新的通道。当IFrame加载完毕,我们使用{{domxref("MessagePort.postMessage")}}将一条消息以及port2传递给IFrame。handleMessage处理程序响应从IFrame发回的消息(使用 {{domxref("MessagePort.onmessage")}}),将其放入段落中。{{domxref("MessageChannel.port1")}}已经监听,以检测消息何时到达。

+

如下代码所示,通过{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}}构造函数创建了一个新的通道。当 IFrame 加载完毕,我们使用{{domxref("MessagePort.postMessage")}}将一条消息以及 port2 传递给 IFrame。handleMessage 处理程序响应从 IFrame 发回的消息(使用 {{domxref("MessagePort.onmessage")}}),将其放入段落中。{{domxref("MessageChannel.port1")}}已经监听,以检测消息何时到达。

var channel = new MessageChannel();
 var para = document.querySelector('p');
@@ -40,7 +40,7 @@ 

示例

para.innerHTML = e.data; }
-

有关完整的运行示例,请参阅我们在GitHub的 channel messaging basic demo  (run it live too).

+

有关完整的运行示例,请参阅我们在 GitHub 的 channel messaging basic demo  (run it live too).

Specifications

diff --git a/files/zh-cn/web/api/messageevent/index.html b/files/zh-cn/web/api/messageevent/index.html index 4d375ec9c716c9..1a0221a744e890 100644 --- a/files/zh-cn/web/api/messageevent/index.html +++ b/files/zh-cn/web/api/messageevent/index.html @@ -21,12 +21,12 @@
  • Web sockets (参见 WebSocket 接口的 onmessage 属性).
  • Cross-document messaging (参见 {{domxref("Window.postMessage()")}} 和 {{domxref("Window.onmessage")}}).
  • Channel messaging (参见 {{domxref("MessagePort.postMessage()")}} 和{{domxref("MessagePort.onmessage")}}).
  • -
  • Cross-worker/document messaging (参见上面两个入口, 还有 {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, 等等.)
  • +
  • Cross-worker/document messaging (参见上面两个入口,还有 {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, 等等.)
  • Broadcast channels (参见 {{domxref("Broadcastchannel.postMessage()")}}) 和 {{domxref("BroadcastChannel.onmessage")}}).
  • WebRTC data channels (参见 {{domxref("RTCDataChannel.onmessage")}}).
  • -

    通过这个事件触发的动作被定义为一个函数,该函数作为相关{{event("message")}}事件 (例如使用前文所列的onmessage 处理器)的事件处理器。

    +

    通过这个事件触发的动作被定义为一个函数,该函数作为相关{{event("message")}}事件 (例如使用前文所列的onmessage 处理器) 的事件处理器。

    {{AvailableInWorkers}}

    @@ -49,7 +49,7 @@

    属性

    {{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
    {{domxref("DOMString")}} representing a unique ID for the event.
    {{domxref("MessageEvent.source")}}
    -
    MessageEventSource (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 代表消息发送者.
    +
    MessageEventSource (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 代表消息发送者。
    {{domxref("MessageEvent.ports")}}
    {{domxref("MessagePort")}}对象数组,表示消息正通过特定通道(数据通道)发送的相关端口(适用于通道消息传输或者向一个共享线程(shared work )发送消息时)。
    @@ -67,17 +67,17 @@

    方法

    示例

    -

    在我们的基础共享线程示例 Basic shared worker example (run shared worker)中,我们有两个HTML页, 每一页都用简单的js代码去执行简单的计算. 不同的脚本使用同一个worker文件去执行计算 — 它们都可以访问那个worker文件,即使它们(scripts)运行在不同的窗口.

    +

    在我们的基础共享线程示例 Basic shared worker example (run shared worker) 中,我们有两个 HTML 页,每一页都用简单的 js 代码去执行简单的计算。不同的脚本使用同一个 worker 文件去执行计算 — 它们都可以访问那个 worker 文件,即使它们(scripts)运行在不同的窗口。

    下面的代码片段展示了使用{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}构造器创建一个 SharedWorker对象。

    var myWorker = new SharedWorker('worker.js');
    -

    接下来两份脚本通过一个{{domxref("SharedWorker.port")}}方法创建的{{domxref("MessagePort")}}对象访问worker。如果onmessage事件通过addEventListener被绑定,端口可以用start()方法手动开启:

    +

    接下来两份脚本通过一个{{domxref("SharedWorker.port")}}方法创建的{{domxref("MessagePort")}}对象访问 worker。如果 onmessage 事件通过 addEventListener 被绑定,端口可以用start()方法手动开启:

    myWorker.port.start();
    -

    当端口被打开,两份脚本各自都可用 port.postMessage() 向worker传消息并用  port.onmessage处理它(worker)传来的消息:

    +

    当端口被打开,两份脚本各自都可用 port.postMessage() 向 worker 传消息并用  port.onmessage处理它(worker)传来的消息:

    first.onchange = function() {
       myWorker.port.postMessage([first.value,second.value]);
    @@ -94,7 +94,7 @@ 

    示例

    console.log('Message received from worker'); }
    -

    在worker内部我们使用{{domxref("SharedWorkerGlobalScope.onconnect")}} 处理器来连接前文说到相同端口. 与worker相关联的端口可以在{{event("connect")}}事件的ports 属性中访问到 — 接着我们使用{{domxref("MessagePort")}} start() 方法打开端口,  onmessage 处理器来处理主线程传来的消息。

    +

    在 worker 内部我们使用{{domxref("SharedWorkerGlobalScope.onconnect")}} 处理器来连接前文说到相同端口。与 worker 相关联的端口可以在{{event("connect")}}事件的ports 属性中访问到 — 接着我们使用{{domxref("MessagePort")}} start() 方法打开端口,  onmessage 处理器来处理主线程传来的消息。

    onconnect = function(e) {
       var port = e.ports[0];
    diff --git a/files/zh-cn/web/api/messageevent/messageevent/index.html b/files/zh-cn/web/api/messageevent/messageevent/index.html
    index 25c1c3cd99515e..6a74a35f35e4f0 100644
    --- a/files/zh-cn/web/api/messageevent/messageevent/index.html
    +++ b/files/zh-cn/web/api/messageevent/messageevent/index.html
    @@ -15,19 +15,19 @@ 

    参数

    type
    -
    要创建的MessageEvent的类型。这可能是XXX中的一个
    +
    要创建的MessageEvent的类型。这可能是 XXX 中的一个

    init {{optional_inline}}

    -

    可以包含以下属性的dictionary对象:

    +

    可以包含以下属性的 dictionary 对象:

      -
    • data: 您希望包含在MessageEvent中的数据。这可以是任何数据类型,如果没有指定,则默认为null。
    • -
    • origin: {{domxref("USVString")}} 表示消息发送源。如果没有指定,则默认为空字符串("")。
    • -
    • lastEventId: {{domxref("DOMString")}} 表示事件的唯一ID。如果没有指定,则默认为空字符串("")。
    • -
    • source: MessageEventSource (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 表示消息发送对象。如果没有设置,则默认为null。
    • -
    • ports:  {{domxref("MessagePort")}} 对象数组,表示正在通过的消息通道关联的端口(在适当的情况下,例如在通道消息传递或向共享工作者发送消息时)。如果没有指定,则默认为空数组([])。
    • +
    • data: 您希望包含在 MessageEvent 中的数据。这可以是任何数据类型,如果没有指定,则默认为 null。
    • +
    • origin: {{domxref("USVString")}} 表示消息发送源。如果没有指定,则默认为空字符串 ("")。
    • +
    • lastEventId: {{domxref("DOMString")}} 表示事件的唯一 ID。如果没有指定,则默认为空字符串 ("")。
    • +
    • source: MessageEventSource (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 表示消息发送对象。如果没有设置,则默认为 null。
    • +
    • ports:  {{domxref("MessagePort")}} 对象数组,表示正在通过的消息通道关联的端口 (在适当的情况下,例如在通道消息传递或向共享工作者发送消息时)。如果没有指定,则默认为空数组 ([])。
    diff --git a/files/zh-cn/web/api/messageport/message_event/index.html b/files/zh-cn/web/api/messageport/message_event/index.html index bc73284ca3e318..b3c165f8c70f62 100644 --- a/files/zh-cn/web/api/messageport/message_event/index.html +++ b/files/zh-cn/web/api/messageport/message_event/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

     {{domxref("MessagePort")}} 接口的 onmessage 事件处理程序是一个{{domxref("EventListener")}}, 当在端口上触发一个类型为 message 的{{domxref("MessageEvent")}} 时被调用 - 即,当端口接收到消息时。

    +

     {{domxref("MessagePort")}} 接口的 onmessage 事件处理程序是一个{{domxref("EventListener")}}, 当在端口上触发一个类型为 message 的{{domxref("MessageEvent")}} 时被调用 - 即,当端口接收到消息时。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/mimetype/index.html b/files/zh-cn/web/api/mimetype/index.html index 0417f404a03272..434ee5acd649f8 100644 --- a/files/zh-cn/web/api/mimetype/index.html +++ b/files/zh-cn/web/api/mimetype/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("HTML DOM")}}

    -

    这 MimeType 接口提供了包含以下信息MIME 与特定插件关联的类型。. {{domxref("NavigatorPlugins.mimeTypes")}} 返回此对象的数组.

    +

    这 MimeType 接口提供了包含以下信息 MIME 与特定插件关联的类型。. {{domxref("NavigatorPlugins.mimeTypes")}} 返回此对象的数组。

    属性

    @@ -17,7 +17,7 @@

    属性

    {{domxref("MimeType.suffixes")}}
    包含插件,所显示的数据的有效文件扩展名的字符串或空字符串,如果扩展名为特定的模块无效。例如,浏览器内容解密模块可能出现在插件列表中,但支持更多文件 extenions 比可以预期。因此,它可能会返回一个空字符串。
    {{domxref("MimeType.enabledPlugin")}}
    -
    返回{ { domxref实例(“插件”)} }包含插件本身的信息。
    +
    返回{ { domxref 实例(“插件”)} }包含插件本身的信息。

    详述

    diff --git a/files/zh-cn/web/api/mousescrollevent/index.html b/files/zh-cn/web/api/mousescrollevent/index.html index 50a4e0c404430d..4f511263aababd 100644 --- a/files/zh-cn/web/api/mousescrollevent/index.html +++ b/files/zh-cn/web/api/mousescrollevent/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}

    -

    MouseScrollEvent事件对象代表了当用户在滚动鼠标滚轮或操作其他类似的输入设备时触发的事件.

    +

    MouseScrollEvent事件对象代表了当用户在滚动鼠标滚轮或操作其他类似的输入设备时触发的事件。

    -

    要优先使用标准化过的WheelEvent来代替该陈旧的事件对象.

    +

    要优先使用标准化过的WheelEvent来代替该陈旧的事件对象。

    方法概述

    @@ -33,7 +33,7 @@

    属性

    axis long - 表明鼠标滚轮滚动的方向. 只读. + 表明鼠标滚轮滚动的方向。只读。 @@ -82,13 +82,13 @@

    滚轮相关事件 mousewheel MouseWheelEvent 非标准 - 只有Firefox不支持 + 只有 Firefox 不支持 DOMMouseScroll MouseScrollEvent 非标准 - 只有Firefox支持 + 只有 Firefox 支持 wheel @@ -108,6 +108,6 @@

    相关链接

    • DOMMouseScroll
    • MozMousePixelScroll
    • -
    • 非Gecko浏览器中的非标准的鼠标滚轮事件对象: {{ domxref("MouseWheelEvent") }}
    • +
    • 非 Gecko 浏览器中的非标准的鼠标滚轮事件对象: {{ domxref("MouseWheelEvent") }}
    • 被标准化的鼠标滚轮事件对象: {{ domxref("WheelEvent") }}
    diff --git a/files/zh-cn/web/api/mutationobserver/disconnect/index.html b/files/zh-cn/web/api/mutationobserver/disconnect/index.html index 7b645602831d4d..205156f27a9534 100644 --- a/files/zh-cn/web/api/mutationobserver/disconnect/index.html +++ b/files/zh-cn/web/api/mutationobserver/disconnect/index.html @@ -24,12 +24,12 @@

    返回值

    undefined.

    -

    注意: 所有已经检测到但是尚未向观察者报告的变动都会被丢弃。

    +

    注意: 所有已经检测到但是尚未向观察者报告的变动都会被丢弃。

    使用说明

    -

    如果被观察的元素被从DOM中移除,然后被浏览器的垃圾回收机制释放,此MutationObserver将同样被删除。

    +

    如果被观察的元素被从 DOM 中移除,然后被浏览器的垃圾回收机制释放,此MutationObserver将同样被删除。

    示例

    diff --git a/files/zh-cn/web/api/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/index.html index 8123961be65cf4..e8cf1280e25e15 100644 --- a/files/zh-cn/web/api/mutationobserver/index.html +++ b/files/zh-cn/web/api/mutationobserver/index.html @@ -13,13 +13,13 @@ ---

    {{APIRef("DOM WHATWG")}}

    -

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

    +

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

    构造函数

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

    方法

    @@ -28,9 +28,9 @@

    方法

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

    Mutation Observer & customize resize event listener & demo

    diff --git a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html index eda2efceb4e31c..5907f485d96046 100644 --- a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html +++ b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html @@ -22,7 +22,7 @@

    参数

      callback
    -
    一个回调函数,每当被指定的节点或子树以及配置项有Dom变动时会被调用。回调函数拥有两个参数:一个是描述所有被触发改动的 {{domxref("MutationRecord")}} 对象数组,另一个是调用该函数的MutationObserver 对象。参见下方的示例了解更多细节  
    +
    一个回调函数,每当被指定的节点或子树以及配置项有 Dom 变动时会被调用。回调函数拥有两个参数:一个是描述所有被触发改动的 {{domxref("MutationRecord")}} 对象数组,另一个是调用该函数的MutationObserver 对象。参见下方的示例了解更多细节  

    返回值

    diff --git a/files/zh-cn/web/api/mutationobserver/observe/index.html b/files/zh-cn/web/api/mutationobserver/observe/index.html index 4419703305de4e..18b4b571569a8b 100644 --- a/files/zh-cn/web/api/mutationobserver/observe/index.html +++ b/files/zh-cn/web/api/mutationobserver/observe/index.html @@ -13,7 +13,7 @@ ---
    {{APIRef("DOM WHATWG")}}
    -

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

    +

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

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

    @@ -26,9 +26,9 @@

    参数

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

    返回值

    @@ -39,7 +39,7 @@

    异常

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

      复用 MutationObserver

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

      -

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

      +

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

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

      -

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

      +

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

      示例

      diff --git a/files/zh-cn/web/api/mutationobserver/takerecords/index.html b/files/zh-cn/web/api/mutationobserver/takerecords/index.html index 93e458557ee557..9e5182ee90cde8 100644 --- a/files/zh-cn/web/api/mutationobserver/takerecords/index.html +++ b/files/zh-cn/web/api/mutationobserver/takerecords/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("DOM WHATWG")}}
      -

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

      +

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

      @@ -21,10 +21,10 @@

      参数

      返回值

      -

      返回一个{{domxref("MutationRecord")}} 对象列表,每个对象都描述了应用于DOM树某部分的一次改动。

      +

      返回一个{{domxref("MutationRecord")}} 对象列表,每个对象都描述了应用于 DOM 树某部分的一次改动。

      -

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

      +

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

      示例

      @@ -53,7 +53,7 @@

      示例

      observer.disconnect();
    -

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

    +

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

    规范

    From 9eb18929bc853a2d81c939ec7311eacda2d95374 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sat, 28 May 2022 20:29:54 +0800 Subject: [PATCH 02/15] Update files/zh-cn/web/api/messageevent/index.html Co-authored-by: A1lo --- files/zh-cn/web/api/messageevent/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/messageevent/index.html b/files/zh-cn/web/api/messageevent/index.html index 1a0221a744e890..1dd059137f96b3 100644 --- a/files/zh-cn/web/api/messageevent/index.html +++ b/files/zh-cn/web/api/messageevent/index.html @@ -94,7 +94,7 @@

    示例

    console.log('Message received from worker'); }
    -

    在 worker 内部我们使用{{domxref("SharedWorkerGlobalScope.onconnect")}} 处理器来连接前文说到相同端口。与 worker 相关联的端口可以在{{event("connect")}}事件的ports 属性中访问到 — 接着我们使用{{domxref("MessagePort")}} start() 方法打开端口,  onmessage 处理器来处理主线程传来的消息。

    +

    在 worker 内部我们使用{{domxref("SharedWorkerGlobalScope.onconnect")}} 处理器来连接前文说到相同端口。与 worker 相关联的端口可以在{{event("connect")}}事件的ports 属性中访问到 — 接着我们使用{{domxref("MessagePort")}} start() 方法打开端口,onmessage 处理器来处理主线程传来的消息。

    onconnect = function(e) {
       var port = e.ports[0];
    
    From 01dd4c0fb09f895e4b12d04d37ea7830a9685915 Mon Sep 17 00:00:00 2001
    From: Jason Lee 
    Date: Sat, 28 May 2022 20:30:07 +0800
    Subject: [PATCH 03/15] Update files/zh-cn/web/api/mimetype/index.html
    
    Co-authored-by: A1lo 
    ---
     files/zh-cn/web/api/mimetype/index.html | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/files/zh-cn/web/api/mimetype/index.html b/files/zh-cn/web/api/mimetype/index.html
    index 434ee5acd649f8..741fecf0cd0548 100644
    --- a/files/zh-cn/web/api/mimetype/index.html
    +++ b/files/zh-cn/web/api/mimetype/index.html
    @@ -17,7 +17,7 @@ 

    属性

    {{domxref("MimeType.suffixes")}}
    包含插件,所显示的数据的有效文件扩展名的字符串或空字符串,如果扩展名为特定的模块无效。例如,浏览器内容解密模块可能出现在插件列表中,但支持更多文件 extenions 比可以预期。因此,它可能会返回一个空字符串。
    {{domxref("MimeType.enabledPlugin")}}
    -
    返回{ { domxref 实例(“插件”)} }包含插件本身的信息。
    +
    返回一个 {{domxref("Plugin")}} 实例,其包含插件本身的信息。

    详述

    From a1a173555cf4cf98ff6f032d77a0593978096a02 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:33:24 +0800 Subject: [PATCH 04/15] Update index.html --- files/zh-cn/web/api/messagechannel/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/messagechannel/index.html b/files/zh-cn/web/api/messagechannel/index.html index 3bc7d5482cb713..e2b45d3f63367e 100644 --- a/files/zh-cn/web/api/messagechannel/index.html +++ b/files/zh-cn/web/api/messagechannel/index.html @@ -55,7 +55,7 @@

    示例

    para.innerHTML = e.data; }
    -

    一个完整的运行示例,可以在 Github 上查看 channel messaging basic demo  (run it live too).

    +

    一个完整的运行示例,可以在 GitHub 上查看 channel messaging basic demo  (run it live too).

    Specifications/规范

    From 21d4246d97293b9f74bfb76f43e38bdf3faaca8b Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:34:46 +0800 Subject: [PATCH 05/15] Update index.html --- files/zh-cn/web/api/messagechannel/port1/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/messagechannel/port1/index.html b/files/zh-cn/web/api/messagechannel/port1/index.html index 52a8489478b64d..b40ba8aba4a64f 100644 --- a/files/zh-cn/web/api/messagechannel/port1/index.html +++ b/files/zh-cn/web/api/messagechannel/port1/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    {{domxref("MessageChannel")}} 的只读属性 port1 返回消息通道的第一个端口, 此端口连接到源上下文通道。

    +

    {{domxref("MessageChannel")}} 的只读属性 port1 返回消息通道的第一个端口,此端口连接到源上下文通道。

    {{AvailableInWorkers}}

    @@ -19,7 +19,7 @@

    Value

    示例

    -

    在以下代码块中,您可以看到使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}构造函数创建的新通道。当{{HTMLElement("iframe")}}加载完毕,我们使用{{domxref("MessagePort.postMessage")}}方法把一条消息和{{domxref("MessageChannel.port2")}}传递给{{HTMLElement("iframe")}}。handleMessage 处理程序将会从<iframe>中(使用{{domxref("MessagePort.onmessage")}}监听事件)接收到信息,将数据其放入一个段落。handleMessage 方法关联到 port1 用于监听收到的消息。

    +

    在以下代码块中,您可以看到使用 {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} 构造函数创建的新通道。当 {{HTMLElement("iframe")}} 加载完毕,我们使用 {{domxref("MessagePort.postMessage")}} 方法把一条消息和 {{domxref("MessageChannel.port2")}} 传递给 {{HTMLElement("iframe")}}。handleMessage 处理程序将会从 <iframe> 中(使用 {{domxref("MessagePort.onmessage")}} 监听事件)接收到信息,将数据其放入一个段落。handleMessage 方法关联到 port1 用于监听收到的消息。

    var channel = new MessageChannel();
     var para = document.querySelector('p');
    @@ -39,7 +39,7 @@ 

    示例

    }
    -

    一个完整的运行示例,可以在 Github 上查看 channel messaging basic demo  (run it live too).

    +

    一个完整的运行示例,可以在 GitHub 上查看 channel messaging basic demo  (run it live too).

    规范

    From 2cf69e0a879f452b7d27a18dbbe47e096125391c Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:36:01 +0800 Subject: [PATCH 06/15] Update index.html --- files/zh-cn/web/api/messageevent/messageevent/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/messageevent/messageevent/index.html b/files/zh-cn/web/api/messageevent/messageevent/index.html index 6a74a35f35e4f0..abd54aeadd9a2b 100644 --- a/files/zh-cn/web/api/messageevent/messageevent/index.html +++ b/files/zh-cn/web/api/messageevent/messageevent/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    MessageEvent()构造函数创建一个新的 {{domxref("MessageEvent")}} 对象实例。

    +

    MessageEvent() 构造函数创建一个新的 {{domxref("MessageEvent")}} 对象实例。

    语法

    @@ -15,7 +15,7 @@

    参数

    type
    -
    要创建的MessageEvent的类型。这可能是 XXX 中的一个
    +
    要创建的 MessageEvent 的类型。这可能是 XXX 中的一个

    init {{optional_inline}}

    @@ -27,7 +27,7 @@

    参数

  • origin: {{domxref("USVString")}} 表示消息发送源。如果没有指定,则默认为空字符串 ("")。
  • lastEventId: {{domxref("DOMString")}} 表示事件的唯一 ID。如果没有指定,则默认为空字符串 ("")。
  • source: MessageEventSource (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 表示消息发送对象。如果没有设置,则默认为 null。
  • -
  • ports:  {{domxref("MessagePort")}} 对象数组,表示正在通过的消息通道关联的端口 (在适当的情况下,例如在通道消息传递或向共享工作者发送消息时)。如果没有指定,则默认为空数组 ([])。
  • +
  • ports: {{domxref("MessagePort")}} 对象数组,表示正在通过的消息通道关联的端口 (在适当的情况下,例如在通道消息传递或向共享工作者发送消息时)。如果没有指定,则默认为空数组 ([])。
  • From 02e1a5e40c9a7937687c28f28daee5e7dd9d5d29 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:36:28 +0800 Subject: [PATCH 07/15] Update index.html --- files/zh-cn/web/api/messageport/message_event/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/messageport/message_event/index.html b/files/zh-cn/web/api/messageport/message_event/index.html index b3c165f8c70f62..7ef7c69365fa6b 100644 --- a/files/zh-cn/web/api/messageport/message_event/index.html +++ b/files/zh-cn/web/api/messageport/message_event/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

     {{domxref("MessagePort")}} 接口的 onmessage 事件处理程序是一个{{domxref("EventListener")}}, 当在端口上触发一个类型为 message 的{{domxref("MessageEvent")}} 时被调用 - 即,当端口接收到消息时。

    +

     {{domxref("MessagePort")}} 接口的 onmessage 事件处理程序是一个 {{domxref("EventListener")}}, 当在端口上触发一个类型为 message 的{{domxref("MessageEvent")}} 时被调用 - 即,当端口接收到消息时。

    {{AvailableInWorkers}}

    From b15ddedde3ebee19561248a502edae473f47fdda Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:37:11 +0800 Subject: [PATCH 08/15] Update index.html --- files/zh-cn/web/api/mimetype/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/mimetype/index.html b/files/zh-cn/web/api/mimetype/index.html index 741fecf0cd0548..119775a31e225e 100644 --- a/files/zh-cn/web/api/mimetype/index.html +++ b/files/zh-cn/web/api/mimetype/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("HTML DOM")}}

    -

    这 MimeType 接口提供了包含以下信息 MIME 与特定插件关联的类型。. {{domxref("NavigatorPlugins.mimeTypes")}} 返回此对象的数组。

    +

    这 MimeType 接口提供了包含以下信息 MIME 与特定插件关联的类型。{{domxref("NavigatorPlugins.mimeTypes")}} 返回此对象的数组。

    属性

    From 9cfbbc30adf05829500a65c8a36281262cc0a29b Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:38:47 +0800 Subject: [PATCH 09/15] Update index.html --- files/zh-cn/web/api/mousescrollevent/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/zh-cn/web/api/mousescrollevent/index.html b/files/zh-cn/web/api/mousescrollevent/index.html index 4f511263aababd..92ffeb614d8faa 100644 --- a/files/zh-cn/web/api/mousescrollevent/index.html +++ b/files/zh-cn/web/api/mousescrollevent/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}

    -

    MouseScrollEvent事件对象代表了当用户在滚动鼠标滚轮或操作其他类似的输入设备时触发的事件。

    +

    MouseScrollEvent 事件对象代表了当用户在滚动鼠标滚轮或操作其他类似的输入设备时触发的事件。

    -

    要优先使用标准化过的WheelEvent来代替该陈旧的事件对象。

    +

    要优先使用标准化过的 WheelEvent 来代替该陈旧的事件对象。

    方法概述

    @@ -33,7 +33,7 @@

    属性

    axis long - 表明鼠标滚轮滚动的方向。只读。 + 表明鼠标滚轮滚动的方向(只读) @@ -66,7 +66,7 @@

    方法

    initMouseScrollEvent()

    -

    查看 nsIDOMMouseScrollEvent::initMouseScrollEvent().

    +

    查看 nsIDOMMouseScrollEvent::initMouseScrollEvent()

    滚轮相关事件对比

    @@ -108,6 +108,6 @@

    相关链接

    • DOMMouseScroll
    • MozMousePixelScroll
    • -
    • 非 Gecko 浏览器中的非标准的鼠标滚轮事件对象: {{ domxref("MouseWheelEvent") }}
    • -
    • 被标准化的鼠标滚轮事件对象: {{ domxref("WheelEvent") }}
    • +
    • 非 Gecko 浏览器中的非标准的鼠标滚轮事件对象:{{ domxref("MouseWheelEvent") }}
    • +
    • 被标准化的鼠标滚轮事件对象:{{ domxref("WheelEvent") }}
    From 8b90dd473ad84e95e59312746e5ef2392dd49a33 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:39:38 +0800 Subject: [PATCH 10/15] Update index.html --- files/zh-cn/web/api/mutationobserver/disconnect/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/mutationobserver/disconnect/index.html b/files/zh-cn/web/api/mutationobserver/disconnect/index.html index 205156f27a9534..d807c6c2caf86c 100644 --- a/files/zh-cn/web/api/mutationobserver/disconnect/index.html +++ b/files/zh-cn/web/api/mutationobserver/disconnect/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM WHATWG")}}
    -

    {{domxref("MutationObserver")}} 的 disconnect() 方法告诉观察者停止观察变动。 可以通过调用其{{domxref("MutationObserver.observe", "observe()")}}方法来重用观察者。

    +

    {{domxref("MutationObserver")}} 的 disconnect() 方法告诉观察者停止观察变动。 可以通过调用其 {{domxref("MutationObserver.observe", "observe()")}} 方法来重用观察者。

    @@ -24,12 +24,12 @@

    返回值

    undefined.

    -

    注意: 所有已经检测到但是尚未向观察者报告的变动都会被丢弃。

    +

    注意:所有已经检测到但是尚未向观察者报告的变动都会被丢弃。

    使用说明

    -

    如果被观察的元素被从 DOM 中移除,然后被浏览器的垃圾回收机制释放,此MutationObserver将同样被删除。

    +

    如果被观察的元素被从 DOM 中移除,然后被浏览器的垃圾回收机制释放,此 MutationObserver 将同样被删除。

    示例

    From 5c881722dfd6842a8d934390b381055eca666ece Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:40:38 +0800 Subject: [PATCH 11/15] Update index.html --- files/zh-cn/web/api/mutationobserver/index.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/files/zh-cn/web/api/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/index.html index e8cf1280e25e15..209c82b32b84f2 100644 --- a/files/zh-cn/web/api/mutationobserver/index.html +++ b/files/zh-cn/web/api/mutationobserver/index.html @@ -13,7 +13,7 @@ ---

    {{APIRef("DOM WHATWG")}}

    -

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

    +

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

    构造函数

    @@ -28,9 +28,9 @@

    方法

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

    Mutation Observer & customize resize event listener & demo

    @@ -41,7 +41,7 @@

    示例

    以下示例改编自这篇博客

    -
    // 选择需要观察变动的节点
    +
     // 选择需要观察变动的节点
     const targetNode = document.getElementById('some-id');
     
     // 观察器的配置(需要观察什么变动)
    @@ -94,8 +94,6 @@ 

    规范

    浏览器兼容

    - -

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

    参见

    From 45d9caecd76a890fe2bc23e2817224431c670e07 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:42:19 +0800 Subject: [PATCH 12/15] Update index.html --- .../web/api/mutationobserver/mutationobserver/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html index 5907f485d96046..09f0383de13fa3 100644 --- a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html +++ b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html @@ -21,8 +21,8 @@

    语法

    参数

    -
      callback
    -
    一个回调函数,每当被指定的节点或子树以及配置项有 Dom 变动时会被调用。回调函数拥有两个参数:一个是描述所有被触发改动的 {{domxref("MutationRecord")}} 对象数组,另一个是调用该函数的MutationObserver 对象。参见下方的示例了解更多细节  
    +
    callback
    +
    一个回调函数,每当被指定的节点或子树以及配置项有 DOM 变动时会被调用。回调函数拥有两个参数:一个是描述所有被触发改动的 {{domxref("MutationRecord")}} 对象数组,另一个是调用该函数的 MutationObserver 对象。参见下方的示例了解更多细节

    返回值

    @@ -31,7 +31,7 @@

    返回值

    示例

    -

    这个例子简单地创建了一个新的 MutationObserver ,监视一个节点及其全部子节点树的添加、移除元素,以及任何属性变化的事件。

    +

    这个例子简单地创建了一个新的 MutationObserver,监视一个节点及其全部子节点树的添加、移除元素,以及任何属性变化的事件。

    回调函数

    @@ -69,7 +69,7 @@

    创建并使用 observer

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

    使用 ID someElement 来获取目标节点树。 observerOptions 中设定了观察者的选项,通过设定 childList 和 attributes 为 true 来获取所需信息。

    +

    使用 ID someElement 来获取目标节点树。observerOptions 中设定了观察者的选项,通过设定 childList 和 attributes 为 true 来获取所需信息。

    当 observer 实例化时,指定 callback() 函数。之后指定目标节点与记录选项,我们开始观察使用 observe() 指定的 DOM 节点。

    From 75ce74032ae83838be492be663ad1412dacf82cd Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sun, 29 May 2022 14:44:27 +0800 Subject: [PATCH 13/15] Update index.html --- .../web/api/mutationobserver/observe/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/zh-cn/web/api/mutationobserver/observe/index.html b/files/zh-cn/web/api/mutationobserver/observe/index.html index 18b4b571569a8b..904a8cf86e095b 100644 --- a/files/zh-cn/web/api/mutationobserver/observe/index.html +++ b/files/zh-cn/web/api/mutationobserver/observe/index.html @@ -13,9 +13,9 @@ ---
    {{APIRef("DOM WHATWG")}}
    -

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

    +

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

    -

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

    +

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

    语法

    @@ -26,9 +26,9 @@

    参数

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

    返回值

    @@ -65,11 +65,11 @@

    当节点断开连接时继

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

    -

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

    +

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

    示例

    -

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

    +

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

    // 得到要观察的元素
     var elementToObserve = document.querySelector("#targetElementId");
    
    From 83d02276645424ec4a21a238459f6d29cea3893d Mon Sep 17 00:00:00 2001
    From: Jason Lee 
    Date: Sun, 29 May 2022 14:45:23 +0800
    Subject: [PATCH 14/15] Update index.html
    
    ---
     files/zh-cn/web/api/mutationobserver/takerecords/index.html | 6 +++---
     1 file changed, 3 insertions(+), 3 deletions(-)
    
    diff --git a/files/zh-cn/web/api/mutationobserver/takerecords/index.html b/files/zh-cn/web/api/mutationobserver/takerecords/index.html
    index 9e5182ee90cde8..311b9259e72e97 100644
    --- a/files/zh-cn/web/api/mutationobserver/takerecords/index.html
    +++ b/files/zh-cn/web/api/mutationobserver/takerecords/index.html
    @@ -24,12 +24,12 @@ 

    返回值

    返回一个{{domxref("MutationRecord")}} 对象列表,每个对象都描述了应用于 DOM 树某部分的一次改动。

    -

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

    +

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

    示例

    -

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

    +

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

    var targetNode = document.querySelector("#someElement");
     var observerOptions = {
    @@ -53,7 +53,7 @@ 

    示例

    observer.disconnect();
    -

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

    +

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

    规范

    From 939d180a3206769595fcbb7d4366735ee1f06aa2 Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 29 May 2022 14:51:46 +0800 Subject: [PATCH 15/15] Apply suggestions from code review --- files/zh-cn/web/api/messageevent/index.html | 4 ++-- files/zh-cn/web/api/mutationobserver/takerecords/index.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/messageevent/index.html b/files/zh-cn/web/api/messageevent/index.html index 1dd059137f96b3..4e7b6ace417037 100644 --- a/files/zh-cn/web/api/messageevent/index.html +++ b/files/zh-cn/web/api/messageevent/index.html @@ -94,9 +94,9 @@

    示例

    console.log('Message received from worker'); }
    -

    在 worker 内部我们使用{{domxref("SharedWorkerGlobalScope.onconnect")}} 处理器来连接前文说到相同端口。与 worker 相关联的端口可以在{{event("connect")}}事件的ports 属性中访问到 — 接着我们使用{{domxref("MessagePort")}} start() 方法打开端口,onmessage 处理器来处理主线程传来的消息。

    +

    在 worker 内部我们使用 {{domxref("SharedWorkerGlobalScope.onconnect")}} 处理器来连接前文说到相同端口。与 worker 相关联的端口可以在 {{event("connect")}} 事件的 ports 属性中访问到 — 接着我们使用 {{domxref("MessagePort")}} start() 方法打开端口,onmessage 处理器来处理主线程传来的消息。

    -
    onconnect = function(e) {
    +
    onconnect = function(e) {
       var port = e.ports[0];
     
       port.addEventListener('message', function(e) {
    diff --git a/files/zh-cn/web/api/mutationobserver/takerecords/index.html b/files/zh-cn/web/api/mutationobserver/takerecords/index.html
    index 311b9259e72e97..635ce888e51671 100644
    --- a/files/zh-cn/web/api/mutationobserver/takerecords/index.html
    +++ b/files/zh-cn/web/api/mutationobserver/takerecords/index.html
    @@ -31,7 +31,7 @@ 

    示例

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

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