变动观察器 MutationObeserver Web API

本文主要是介绍变动观察器 MutationObeserver Web API，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

MutationObserver

MutationObserver.observe()

config的配置项

定义

• DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。

  var observer = new MutationObserver(callback);

示例代码

 var targetNode = document.querySelector("#someElement");
var observerOptions = {childList: true,  // 观察目标子节点的变化，是否有添加或者删除attributes: true, // 观察属性变动subtree: true //观察后代节点，默认为 false
}var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

监听doucment.title的变化

 const targetNode =  document.querySelector("title");// 配置器的配置：需要监听的变动const config = { characterData: true, // 监视指定目标节点或子节点树中节点所包含的字符数据的变化 无默认值。subtree: true, // 观察后代节点，默认为 falsechildList: true, // 观察目标子节点的变化，是否有添加或者删除};// 变动时回调const callback = function (mutations) {let title = mutations[0].target.innerText;console.log(title);};// 创建一个MutationObserver实例const observer = new MutationObserver(callback);// 监听目标节点observer.observe(targetNode, config);// observer.disconnect()

这篇关于变动观察器 MutationObeserver Web API的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---