知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
MutationObserver
node.contains
readystate
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
MutationObserver
定义
MutationObserver提供监视DOM树修改的能力。可监听的变化有:属性、文本。支持监听孙子节点。
简单示例
// 注册监视器, 一旦发生变化会alert
let
observer
=
new
MutationObserver
(()
=>
{
alert
(
'change'
)
});
// 开始监视,observer可以接受{ attributes: true, childList: true, subtree: true }
observer
.
observe
(
el
,
{
childList
:
true
,
subtree
:
true
});
// 停止监视, 释放资源
observer
.
disconnect
()
常用场景
滚动加载, 用来监视元素是否已经加入或者修改子元素, 加入成功后触发回调
// DOM注册scroll事件监听
container
.
addEventListener
(
'scroll'
,
onScroll
);
// 创建MutationObserver对象,并绑定到onScroll事件处理
const
observer
=
el
[
scope
].
observer
=
new
MutationObserver
(
onScroll
);
// 设置监听
observer
.
observe
(
container
,
{
childList
:
true
,
subtree
:
true
});
🎁HTML - 以前
DOM
下一个
node.contains
最近更新
2yr ago
复制链接
大纲
定义
简单示例
常用场景