MutationObserver.MutationObserver()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
DOM 规范中的 MutationObserver()
构造函数——是 MutationObserver
接口内容的一部分——创建并返回一个新的观察器,它会在触发指定 DOM 事件时,调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动;而必须先调用 observe()
方法来确定,要监听哪一部分的 DOM 以及要响应哪些更改。
语法
var observer = new MutationObserver(callback);
参数
callback
-
一个回调函数,每当被指定的节点或子树以及配置项有 DOM 变动时会被调用。回调函数拥有两个参数:一个是描述所有被触发改动的
MutationRecord
对象数组,另一个是调用该函数的MutationObserver
对象。参见下方的示例了解更多细节
返回值
一个新的、包含监听 DOM 变化回调函数的 MutationObserver
对象。
示例
这个例子简单地创建了一个新的 MutationObserver
,监视一个节点及其全部子节点树的添加、移除元素,以及任何属性变化的事件。
回调函数
function callback(mutationList, observer) {
mutationList.forEach((mutation) => {
switch (mutation.type) {
case "childList":
/* 从树上添加或移除一个或更多的子节点;参见 mutation.addedNodes 与
mutation.removedNodes */
break;
case "attributes":
/* mutation.target 中某节点的一个属性值被更改;该属性名称在 mutation.attributeName 中,
该属性之前的值为 mutation.oldValue */
break;
}
});
}
调用 observe()
即可开始观察 DOM。当观察者 observer 发现匹配观察请求中指定的配置项的更改时,callback()
方法便会被调用。
使用 mutation.type
获取发生的变动类别(无论是子节点的变动,还是节点属性的变动)。
创建并使用 observer
使用以下代码设置一个观察进程。
var targetNode = document.querySelector("#someElement");
var observerOptions = {
childList: true, // 观察目标子节点的变化,是否有添加或者删除
attributes: true, // 观察属性变动
subtree: true, // 观察后代节点,默认为 false
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
使用 ID someElement
来获取目标节点树。observerOptions
中设定了观察者的选项,通过设定 childList
和 attributes
为 true
来获取所需信息。
当 observer 实例化时,指定 callback()
函数。之后指定目标节点与记录选项,我们开始观察使用 observe()
指定的 DOM 节点。
从现在开始直到调用 disconnect()
,每次以 targetNode
为根节点的 DOM 树添加或移除元素时,以及这些元素的任意属性改变时,callback()
都会被调用。
规范
Specification |
---|
DOM # ref-for-dom-mutationobserver-mutationobserver① |
浏览器兼容性
BCD tables only load in the browser