JavaScript怎么知道网页那个节点变化了
时间: 2023-10-09 14:10:14 浏览: 44
JavaScript可以使用MutationObserver API来监测网页节点的变化。MutationObserver是一种用于异步监测DOM树中节点变化的API,可以监测DOM中任何节点的变化,包括属性、子节点的增减等。
通过使用MutationObserver,可以指定要监测的DOM节点,然后定义一个回调函数,在节点发生变化时执行回调函数中的代码。在回调函数中,可以通过MutationRecord对象获取变化的具体信息,例如变化的类型、变化发生的节点等。
以下是一个简单的示例代码,演示如何使用MutationObserver来监测DOM节点的变化:
```javascript
// 选择要监测的DOM节点
const targetNode = document.querySelector('#target');
// 创建一个MutationObserver实例,并定义回调函数
const observer = new MutationObserver((mutationsList, observer) => {
// 遍历变化列表,处理每一个变化
for (let mutation of mutationsList) {
console.log(mutation.type);
console.log(mutation.target);
// 处理变化的具体内容
}
});
// 配置MutationObserver实例,指定要监测的变化类型
const config = { attributes: true, childList: true, subtree: true };
// 为目标节点添加MutationObserver实例,并开始监测
observer.observe(targetNode, config);
```
在上面的代码中,我们选择了一个DOM节点作为监测目标,然后创建了一个MutationObserver实例,并定义了回调函数。在配置MutationObserver实例时,我们指定了要监测的变化类型,包括节点属性的变化、子节点的增减等。最后,我们将MutationObserver实例添加到目标节点上,并开始监测节点变化。