MutationObserverInit.attributes

The MutationObserverInit dictionary's optional attributes property is used to specify whether or not to watch for attribute value changes on the node or nodes being observed.

Syntax

var options = {
  attributes: true | false
}

Value

A Boolean value indicating whether or not to report through the callback any changes to the values of attributes on the node or nodes being monitored. The default value is false.

If true, the callback specified when observe() was used to start observing the node or subtree will be called any time one or more attributes have changed on observed nodes.

You can expand the capabilities of attribute mutation monitoring using other options:

  • attributeFilter lets you specify specific attribute names to monitor instead of monitoring all attributes.
  • attributeOldValue lets you specify whether or not you want the previous value of changed attributes to be included in the MutationRecord's oldValue property.
  • subtree lets you specify whether to watch the target node and all of its descendants (true), or just the target node (false).

If you set either attributeFilter or attributeOldValue to true, attributes is automatically assumed to be true, even if you don't expressly set it as such.

Example

In this example, a Mutation Observer is set up to watch for changes to the status and username attributes in any elements contained within a subtree that displays the names of users in a chat room. This lets the code, for example, reflect changes to users' nicknames, or to mark them as away from keyboard (AFK) or offline.

function callback(mutationList) {
  mutationList.forEach(function(mutation) {
    switch(mutation.type) {
      case "attributes":
        notifyUser("Attribute name " + mutation.attributeName +
            " changed to " + mutation.target[attributeName] +
            " (was " + mutation.oldValue + ")");
        break;
    }
  });
}

var targetNode = document.querySelector("#target");

var observer = new MutationObserver(callback);
observer.observe(targetNode, {
  attributes: true,
  attributeOldValue: true
});

The callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of MutationRecord objects. For any items representing an attribute change (which can be detected by the value of MutationRecord.type being "attributes"), a function called notifyUser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.target[attributeName]) and its old value (mutation.oldValue).

When observe() is called, the specified options are attributes and attributeOldValue, which means that changes to attribute values will be reported, and each mutation record will include the oldValue property specifying the attribute's previous value.

Specifications

Specification Status Comment
DOM
The definition of 'MutationObserverInit.attributes' in that specification.
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 14
Notes
Full support 14
Notes
Notes Starting in Firefox 36, attributes has no default value; previously, its default value was false.
IE 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 ? Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Mobile ? Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Starting in Firefox 36, attributes has no default value; previously, its default value was false.
Opera Android Full support 15Safari iOS Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Requires the vendor prefix: webkit
Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,