在此页

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

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 属性 to true , as it's implied.

若 属性 permission is true but no attributeFilter is included in the options object, all attributes' values are watched for changes.

句法

var options = {
  attributeFilter: [ "list", "of", "attribute", "names" ]
}
					

值

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() 构造函数用于创建新的 MutationObserver , attribute monitoring is enabled regardless of whether or not the 属性 特性为 true .

范例

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

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.

当 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" 。 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.

规范

规范	状态	注释
DOM The definition of 'MutationObserverInit: attributeFilter' 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
attributeFilter	Chrome 26 26 18 — 26 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge 12 注意事项 12 注意事项 Before Edge 79, this requires attributes: true 当使用 attributeFilter 。若 attributes: true is not present, then Edge throws a syntax error.	Firefox 14	IE 11 注意事项 11 注意事项 Internet Explorer requires attributes: true 当使用 attributeFilter 。若 attributes: true is not present, then Internet Explorer throws a syntax error.	Opera 15	Safari 7 7 6 — 7 Prefixed Prefixed Implemented with the vendor prefix: webkit	WebView Android ?	Chrome Android 26 26 18 — 26 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox Android 14	Opera Android 14	Safari iOS 7 7 6 — 7 Prefixed Prefixed Implemented with the vendor prefix: webkit	Samsung Internet Android 1.5 1.5 1.0 — 1.5 Prefixed Prefixed Implemented with the vendor prefix: webkit

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

见实现注意事项。

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

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

元数据

• 最后修改： Mar 18, 2019

相关话题

1. MutationObserverInit
2. 特性

   1. attributeFilter
   2. attributeOldValue
   3. 属性
   4. characterData