The MutationObserverInit
dictionary's optional attributeFilter
property is an array of strings specifying the names of the attributes whose values are to be monitored for changes. If this property is specified, there's no need to also set attributes
to true
, as it's implied.
If the attributes
permission is true
but no attributeFilter
is included in the options object, all attributes' values are watched for changes.
Syntax
var options = { attributeFilter: [ "list", "of", "attribute", "names" ] }
Value
An array of DOMString
objects, each specifying the name of one attribute whose value is to be monitored for changes. There is no default value.
If this property exists on the options object when the MutationObserver()
constructor is used to create a new MutationObserver
, attribute monitoring is enabled regardless of whether or not the attributes
property is true
.
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":
switch(mutation.attributeName) {
case "status":
userStatusChanged(mutation.target.username, mutation.target.status);
break;
case "username":
usernameChanged(mutation.oldValue, mutation.target.username);
break;
}
break;
}
});
}
var userListElement = document.querySelector("#userlist");
var observer = new MutationObserver(callback);
observer.observe(userListElement, {
attributeFilter: [ "status", "username" ],
attributeOldValue: true,
subtree: 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"
), we use the attribute's name, obtained using MutationRecord.attributeName
, to identify the type of change that occurred and then dispatch to the appropriate handler function.
Note the use of MutationRecord.oldValue
to get the previous value of the "username"
property so we have that information when doing lookups in our local array of users.
When observe()
is called, the specified options include both attributeFilter
and subtree
, so that we monitor the attribute values for all of the nodes contained within the subtree rooted at the node with the ID "userlist"
. The attributeOldValue
option is set to true
because we want the prior value of the changed attributes recorded and reported in the mutation records we receive.
Specifications
Specification | Status | Comment |
---|---|---|
DOMThe definition of 'MutationObserverInit: attributeFilter' in that specification. | Living Standard |
Browser compatibility
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
attributeFilter
|
Chrome Full support 26 Full support 26 No support 18 — 26 Prefixed' Implemented with the vendor prefix: webkit |
Edge Full support 12 Full support 12 Notes' Before Edge 79, this requires |
Firefox
Full support 14 |
IE Full support 11 Full support 11 Notes' Internet Explorer requires |
Opera
Full support 15 |
Safari Full support 7 Full support 7 No support 6 — 7 Prefixed' Implemented with the vendor prefix: webkit |
WebView Android
? |
Chrome Android Full support 26 Full support 26 No support 18 — 26 Prefixed' Implemented with the vendor prefix: webkit |
Firefox Android
Full support 14 |
Opera Android
Full support 14 |
Safari iOS Full support 7 Full support 7 No support 6 — 7 Prefixed' Implemented with the vendor prefix: webkit |
Samsung Internet Android Full support 1.5 Full support 1.5 No support 1.0 — 1.5 Prefixed' Implemented with the vendor prefix: webkit |
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.
MutationObserverInit.attributeFilter by Mozilla Contributors is licensed under CC-BY-SA 2.5.