MutationObserver
方法
observe()
配置
MutationObserver
callback to begin receiving notifications of changes to the DOM that match the given options.
Depending on the configuration, the observer may watch a single
节点
in the DOM tree, or that node and some or all of its descendant nodes.
To stop the
MutationObserver
(so that none of its callbacks will be triggered any longer), call
MutationObserver.disconnect()
.
mutationObserver.observe(target, options)
target
节点
(which may be an
元素
) within the DOM tree to watch for changes, or to be the root of a subtree of nodes to be watched.
选项
MutationObserverInit
object providing options that describe which DOM mutations should be reported to
mutationObserver
’s
callback
.
undefined
.
TypeError
选项
are configured such that nothing will actually be monitored.
MutationObserverInit.childList
,
MutationObserverInit.attributes
，和
MutationObserverInit.characterData
are all
false
)。
选项。
属性
is
false
(indicating that attribute changes are not to be monitored), but
attributeOldValue
is
true
and/or
attributeFilter
is present.
characterDataOldValue
option is
true
but
MutationObserverInit.characterData
is
false
(indicating that character changes are not to be monitored).
可以调用
observe()
multiple times on the same
MutationObserver
to watch for changes to different parts of the DOM tree and/or different types of changes. There are some caveats to note:
observe()
on a node that's already being observed by the same
MutationObserver
, all existing observers are automatically removed from all targets being observed before the new observer is activated.
MutationObserver
is not already in use on the target, then the existing observers are left alone and the new one is added.
Mutation observers are intended to let you be able to watch the desired set of nodes over time, even if the direct connections between those nodes are severed. If you begin watching a subtree of nodes, and a portion of that subtree is detached and moved elsewhere in the DOM, you continue to watch the detached segment of nodes, receiving the same callbacks as before the nodes were detached from the original subtree.
In other words, until you've been notified that nodes are being split off from your monitored subtree, you'll get notifications of changes to that split-off subtree and its nodes. This prevents you from missing changes that occur after the connection is severed and before you have a chance to specifically begin monitoring the moved node or subtree for changes.
Theoretically, this means that if you keep track of the
MutationRecord
objects describing the changes that occur, you should be able to "undo" the changes, rewinding the DOM back to its initial state.
In this example, we demonstrate how to call the method
observe()
on an instance of
MutationObserver
, once it has been set up, passing it a target element and a
MutationObserverInit
options object.
// identify an element to observe
const elementToObserve = document.querySelector("#targetElementId");
// create a new instance of `MutationObserver` named `observer`,
// passing it a callback function
const observer = new MutationObserver(function() {
console.log('callback that runs when observer is triggered');
});
// call `observe()` on that MutationObserver instance,
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {subtree: true, childList: true});
| 规范 | 状态 | 注释 |
|---|---|---|
|
DOM
The definition of 'MutationObserver.observe()' in that specification. |
实时标准 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
observe
|
Chrome 18 | Edge 12 | Firefox 14 | IE 11 | Opera 15 | Safari 6 | WebView Android ≤37 | Chrome Android 18 | Firefox Android 14 | Opera Android 14 | Safari iOS 6 | Samsung Internet Android 1.0 |
完整支持
MutationObserver
observe()
takeRecords()