DOM Observer
7.1'21
MutationObserver
MutationObserver 接口可以检测 DOM 树的变化
Methods
-
主方法为 observe(target, options),可以配置需要检测的节点变化、子节点和属性等
-
停止检测 disconnect()
const observer = new MutationObserver(callback)
observer.observe(targetNode, options)
observer.disconnect()
Example
// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
const options = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
} else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, options);
// Later, you can stop observing
observer.disconnect();
See also
📖