MutationObserver.MutationObserver()

翻译正在进行中。

DOM规范的MutationObserver()构造函数 -  是MutationObserver接口内容的一部分 - 创建并返回一个新的观察者,它在DOM事件触发时调用指定的回调函数。DOM的观察不会立即启动;而必须先调用observe() 方法来确定要监听哪一部分的DOM以及要注意哪些更改。

语法

var observer = new MutationObserver(callback);

参数

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

返回值

一个新的、包含监听Dom变化回调函数的MutationObserver 对象

示例

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

The callback function

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
        /* 从树上添加或移除一个或更多的子节点;参见 mutation.addedNodes 与
           mutation.removedNodes */
        break;
      case 'attributes':
        /* mutation.target 中某节点的一个属性值被更改;该属性名称在 mutation.attributeName 中,
           该属性之前的值为 mutation.oldValue */
        break;
    }
  });
}

当观察者 observer 发现更改匹配到观察请求中指定的配置项时,callback方法将会被调用;调用 observe() 开始观察 DOM。

使用 mutation.type 获取发生的变动类别(无论是子节点的变动,还是节点属性的变动)。

创建并使用 observer

使用以下代码设置一个观察进程。

var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true, // 观察目标子节点的变化,添加或者删除
  attributes: true, // 观察属性变动
  subtree: true // 默认为 false,设置为 true 可以观察后代节点
}

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

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

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

从现在开始直到调用 disconnect() ,每次以 targetNode 为根节点的 DOM 树添加或移除元素时,以及这些元素的任意属性改变时,callback() 都会被调用。

规范

规范 状态 说明
DOM
MutationObserver()
Living Standard  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: Webkit
Edge Full support YesFirefox Full support 14IE Full support 11Opera Full support 15Safari Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Implemented with the vendor prefix: Webkit
WebView Android Full support Yes
Full support Yes
No support ? — ?
Prefixed
Prefixed Implemented with the vendor prefix: Webkit
Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: Webkit
Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 14Safari iOS Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Implemented with the vendor prefix: Webkit
Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, WangLeto, liucity, ceido
最后编辑者: mdnwebdocs-bot,