介绍
以上这段引自权威牛逼的MDN。（懒得自己写了...）
创建MutationObserver对象
var mo = new MutationObserver(
function callback
);
参数只有一个，就是回调函数(callback)，当MutationObserver监听到目标变化时会触发这个回调。这个回调参数会被传递两个参数，第一个是包含了若干个变化目标的信息的参数，这些信息集合称为MutationRecord对象；第二个参数则是你创建的这个对象自身。
实例方法
1.observe()：
// 第一个参数是要监听的DOM节点对象，第二是用于配置的对象
observe( Node, option);
其中option对象可配置是否监听目标节点的子节点、是否监听html属性/文本等，可以查看MutationObserverInit的详细介绍
2. disconnect() 停止监听。
3.takeRecords() 清空观察者对象的记录队列,并返回里面的内容
兼容性
一个例子
下面这个例子演示了如何定时插入节点并被监听到，效果点击这里可查看：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MutationObserver demo</title>
</head>
<body>
<div id="info" style="color:brown; font-size: 20px;">正在监听#wrap</div>
<div id="wrap"></div>
<script>
var body = document.body;
var info = document.getElementById('info');
main();
// 创建MutationObserver对象及其回调
function createMutationObserverObject(){
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
if(!MutationObserver){
info.innerHTML = '您的浏览器不支持MutationObserver对象!';
return false;
}
return new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
info.innerHTML = '监听到DOM变化，新增元素的id: ' + mutation.addedNodes[0].id;
});
});
}
// 使用MutationObserver对象的observe方法对目标节点监听
function listen(){
var observer = createMutationObserverObject();
if(!observer) return;
observer.observe(wrap, { attributes: true, childList: true});
}
// 定时往目标节点新增元素查看监听情况
function main(){
listen();
var count = 0;
var listenDom = setInterval(function(){
count++;
var p = document.createElement('p');
p.id = 'p' + count;
p.innerText = "我的id是 p" + count;
wrap.appendChild(p);
if(count>=5){
clearInterval(listenDom);
//observer.disconnect();
}
}, 1500)
}
</script>
</body>
</html>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！