在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

DOM MutationObserver() constructor — part of the MutationObserver interface — creates and returns a new observer which invokes a specified callback when DOM events occur. DOM observation does not begin immediately; the observe() method must be called first to establish which portion of the DOM to watch and what kinds of changes to watch for.

句法

const observer = new MutationObserver(callback)
					

参数

callback

A function which will be called on each DOM change that qualifies given the observed node or subtree and options.

callback function takes as input two parameters:

1. An array of MutationRecord objects, describing each change that occurred; and

2. the MutationObserver which invoked the callback .

见 范例 下文了解更多细节。

返回值

新的 MutationObserver object, configured to call the specified callback when DOM mutations occur.

范例

This example simply creates a new MutationObserver configured to watch a node and all of its children for additions and removals of elements to the tree, as well as any changes to attributes on any of the elements in the tree.

The callback function

function callback(mutationList, observer) {
  mutationList.forEach( (mutation) => {
    switch(mutation.type) {
      case 'childList':
        /* One or more children have been added to and/or removed
           from the tree.
           (See mutation.addedNodes and mutation.removedNodes.) */
        break;
      case 'attributes':
        /* An attribute value changed on the element in
           mutation.target.
           The attribute name is in mutation.attributeName, and
           its previous value is in mutation.oldValue. */
        break;
    }
  });
}
					

callback() function is invoked when the observer sees changes matching the configuration of the observation request specified when calling observe() to begin watching the DOM.

The kind of change that took place (either a change to the list of children, or a change to an attribute) is detected by looking at the mutation.type 特性。

Creating and starting the observer

This code actually sets up the observation process.

const targetNode = document.querySelector("#someElement");
const observerOptions = {
  childList: true,
  attributes: true,
  // Omit (or set to false) to observe only changes to the parent node
  subtree: true
}
const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
					

The desired subtree is located by finding an element with the ID someElement . A set of options for the observer is also established in the observerOptions record. In it, we specify values of true for both childList and 属性 , so we get the information we want.

Then the observer is instantiated, specifying the callback() function. We begin observing the DOM nodes of interest by calling observe() , specifying the target node and the 选项 对象。

From this point until disconnect() is called, callback() will be called each time an element is added to or removed from the DOM tree rooted at targetNode , or any of those elements' attributes are changed.

规范

规范	状态	注释
DOM The definition of 'MutationObserver()' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
MutationObserver() 构造函数	Chrome 26	Edge 12	Firefox 14	IE 11	Opera 15	Safari 7	WebView Android Yes	Chrome Android 26	Firefox Android 14	Opera Android 14	Safari iOS 7	Samsung Internet Android 1.5

图例

完整支持

完整支持

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

元数据

• 最后修改： Jul 14, 2020

相关话题

1. MutationObserver
2. 构造函数

   1. MutationObserver()
3. 方法

   1. observe()
   2. takeRecords()