MutationObserver.MutationObserver()

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

Syntax

var observer = new MutationObserver(callback);

Parameters

callback
A function which will be called on each DOM change that qualifies given the targeted node or subtree and options. The callback function takes as input two parameters: an array of MutationRecord objects describing each change that occurred and the MutationObserver which invoked the callback. See the example below for more details.

Return value

A new MutationObserver object configured to call the specified callback when DOM mutations occur.

Example

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;
    }
  });
}

The 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 {domxref("MutationRecord.type", "mutation.type")}} property.

Creating and starting the observer

This code actually sets up the observation process.

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

var 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 attributes, so we get the information we want.

Then the observer is instantiated, specifying the callback() function, and we begin observing the DOM nodes of interest by calling observe(), specifying that target node and the options record.

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.

 

Specifications

Specification Status Comment
DOM
MutationObserver()
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Requires 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 Requires the vendor prefix: Webkit
WebView Android Full support Yes
Full support Yes
No support ? — ?
Prefixed
Prefixed Requires the vendor prefix: Webkit
Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Requires 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 Requires 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.

文档标签和贡献者

此页面的贡献者: ceido
最后编辑者: ceido,