写js ,监控某个html标签,如果发生改变就立即获取内容
时间: 2023-11-17 22:06:35 浏览: 41
可以使用MutationObserver来监控HTML标签的变化,并在变化时获取内容。下面是一个示例代码:
```javascript
// 监控的目标元素
const targetElement = document.getElementById('target');
// 创建一个MutationObserver实例
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
// 目标元素的子节点发生了变化
console.log(targetElement.textContent);
}
}
});
// 配置观察选项
const config = { childList: true };
// 开始观察目标元素
observer.observe(targetElement, config);
```
上述代码中,我们首先获取了需要监控的目标元素,然后创建了一个MutationObserver实例,并传入一个回调函数。在回调函数中,我们遍历所有发生变化的mutation,如果变化类型是childList,说明目标元素的子节点发生了变化,于是我们立即获取目标元素的内容。
最后,我们设置观察选项,只监听子节点的变化,并开始观察目标元素。这样,每当目标元素的子节点发生变化时,就会触发回调函数,并获取目标元素的内容。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)