js监听dom节点属性的改变
时间: 2023-10-06 18:11:08 浏览: 55
可以使用MutationObserver来监听DOM节点属性的改变。
示例代码:
```javascript
// 监听的目标节点
const targetNode = document.querySelector('#target');
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(mutationsList => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes') {
console.log('属性值发生了改变:', mutation.attributeName, mutation.target.getAttribute(mutation.attributeName));
}
}
});
// 配置观察选项
const config = { attributes: true, attributeOldValue: true };
// 传入目标节点和观察选项
observer.observe(targetNode, config);
// 修改目标节点的属性值
targetNode.setAttribute('data-test', 'new value');
```
在上述示例中,我们使用MutationObserver来监听`#target`节点的属性改变。在观察器的回调函数中,我们遍历了mutationsList数组,判断是否是属性改变类型,并输出了属性名称和新的属性值。
当调用`setAttribute`方法修改目标节点的属性值时,观察器会监听到这个改变,并输出到控制台。