MutationObserver.observe()

MutationObserverobserve()方法配置了MutationObserver对象的回调方法以开始接收与给定选项匹配的DOM变化的通知。 根据配置,这个观察者会观察DOM树中的单个Node,或者指定的节点及其某些或者所有的子孙节点。

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

语法

mutationObserver.observe(target[, options])

参数

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

返回值

undefined.

异常

TypeError
以下任一情况都会抛出异常:

使用说明

复用MutationObservers

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

  • 如果在已经被同一MutationObserver观察的节点上调用observe()方法,则在激活新观察者之前,所有现有观察者将自动从所有正在观察的目标中移除。
  • 如果同一个MutationObserver还没有作用在target上,则保留现有观察者并添加新观察者。

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

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

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

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

示例

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

// identify an element to observe
var elementToObserve = document.querySelector("#targetElementId");

// create a new instance of `MutationObserver` named `observer`, 
// passing it a callback function
var observer = new MutationObserver(function() {
    console.log('callback that runs when observer is triggered');
});

// call `observe` on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {subtree: true, childList: true});

规范

规范 状态 批注
DOM
MutationObserver.observe()
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
observeChrome Full support 18Edge Full support 12Firefox Full support 14IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support Yes

Legend

Full support  
Full support