JS实时监听DOM元素变化 - MutationObserver_监听元素位置变化

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

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

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

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)
1
2
3
4
5
6
7

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

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

停止监听

mutationObserver.disconnect();
1

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

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