JS实时监听DOM元素变化

使用 MutationObserver API实时监听DOM元素变化

创建 MutationObserver 实列，接受一个用于监听到DOM元素变化的回调函数

const handleListenChange = (mutationsList, observer) => {console.log(mutationsList, observer)
}
const mutationObserver = new MutationObserver(handleListenChange)

mutationsList为DOM元素所有变化的列表集合，列表元素包含以下属性

type：元素变化类型（attribute、characterData、childList…）。
target：发生变动的DOM节点。
addedNodes：新增的DOM节点。
removedNodes：删除的DOM节点。
previousSibling：前一个同级节点，如果没有则返回null。
nextSibling：下一个同级节点，如果没有则返回null。
attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

开启监听

const element = document.querySelector('#')
const options = {attributes: true,childList: true,subtree: true
}
mutationObserver.observe(element, options)

element为需要监听的DOM对象
options为需要监听该DOM对象哪些变化，有以下几种

childList：子节点的变动（指新增，删除或者更改）。
attributes：属性的变动。
characterData：节点内容或节点文本的变动。
subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。
attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。
characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。
attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。

停止监听

mutationObserver.disconnect();

清除变动记录并返回记录值

const changes = mutationObserver.takeRecords();
console.log(changes);

JS实时监听DOM元素变化 - MutationObserver相关推荐

vue监听dom元素变化修改echar图表
文章目录前言一.install监听依赖二.使用步骤 1.监听指定id并修改echarts宽高监听Windows窗口变化前言提示:这里可以添加本文要记录的大概内容: vue中监听dom元素变 ...
MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
动态监听DOM元素的高度
1.背景考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容 ...
实时监听输入框值变化的完美方案：oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
vue图片宽高自适应_Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将widt ...
js实时监听input输入框值的变化以便即使匹配搜索项
问题说明在含有搜索框的网页中,经常需要及时匹配搜索项,因此需要监听input输入框的变化事件.如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,除了监听 ...

JS实时监听DOM元素变化 - MutationObserver

JS实时监听DOM元素变化 - MutationObserver相关推荐

最新文章

热门文章