MutationObserverInit.attributeFilter

翻译不完整。 请帮助我们翻译这篇文章!

MutationObserverInit 字典的可选属性 attributeFilter 是一个字符串数组,用于指定要监听变化的属性名称。 如果指定了该属性,则 attributes 无论是否为 true,属性监听都将启用。

如果属性 attributes 设置为 true ,但options对象中未包含 attributeFilter ,则所有属性的变化都会被监听。

语法

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

DOMString数组, 每项指定一个要监听其变化的属性名称,没有默认值。

当使用构造函数MutationObserver()创建MutationObserver对象时,如果options对象中存在该属性,则无论attributes是否为true,都将启用属性监听。

示例

在本示例中,设置了一个变化监听器来监听用于显示聊天室用户名的子树中所有元素的statususername属性的变化。这样就可以反应用户昵称或状态的更改, 例如,可以将用户标记为离开或离线。

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()函数将在监听器启动时传给observe()方法,用来检查MutationRecord对象的每一项。对于代表属性更改的任何项(可以通过MutationRecord.type的值为“ attributes”的值来检测),我们使用通过MutationRecord.attributeName获得的属性名称来识别发生的更改的类型,然后将其分派给适当的处理函数。

请注意,在查找本地用户数组时可以使用MutationRecord.oldValue来获取username的上一个值。

当observe()被调用时, options对象中指定了attributeFiltersubtree,所以id为“userlist”的元素的所有子树的所有节点的属性值都会被监听。attributeOldValue被设置为true,因为我们希望在监听到值变化时可以获取到上一个值。

规范

规范 状态 说明
DOM
MutationObserverInit: attributeFilter
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
attributeFilterChrome Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12
Notes
Full support 12
Notes
Notes Before Edge 79, this requires attributes: true when using attributeFilter. If attributes: true is not present, then Edge throws a syntax error.
Firefox Full support 14IE Full support 11
Notes
Full support 11
Notes
Notes Internet Explorer requires attributes: true when using attributeFilter. If attributes: true is not present, then Internet Explorer throws a syntax error.
Opera Full support 15Safari Full support 7
Full support 7
No support 6 — 7
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android ? Chrome Android Full support 26
Full support 26
No support 18 — 26
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 7
Full support 7
No support 6 — 7
Prefixed
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
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.