html DOM 变化通知，很好很强大

最新推荐文章于 2023-09-30 19:13:47 发布

weixin_34238642

最新推荐文章于 2023-09-30 19:13:47 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/youjiao/p/5896469.html

版权

刚做一个项目，某个div标签显示后需要接收一个事件，用于主动调用 window.resize()；

从网上找了了，发现 MutationObserver。给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力。

测试代码如下。保存成html文件即可运行

 1 <html>
 2 <head>
 3     <title></title>
 4     <script type="text/javascript" src="http://ask.csdn.net/js/jquery-1.11.1.min.js"></script>
 5 </head>
 6 <body>
 7      <div>
 8         <input type="button" value="Test" onclick="test()"/>
 9     </div>
10     
11     <div id="divTest" style="display:none;height:300px;width:300px;background-color:yellow">
12 
13             observer.observe(target, config);
14     </div>
15     <script>
16         function test() {
17             $('#divTest').css("display", "block");
18         }
19         $(function () {
20             // Firefox和Chrome早期版本中带有前缀
21             var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
22 
23             // 选择目标节点
24             var target = document.getElementById('divTest');
25              
26             // 创建观察者对象
27             var observer = new MutationObserver(function(mutations) {
28               mutations.forEach(function(mutation) {
29                 alert(mutation.type);
30               });    
31             });
32              
33             // 配置观察选项:
34             var config = { attributes: true, childList: true, characterData: true }
35              
36             // 传入目标节点和观察选项
37             observer.observe(target, config);
38              
39             // 随后,你还可以停止观察
40             //observer.disconnect();
41         });
42     </script>
43 </body>
44 </html>

在实际用的过程中这一步 observer.observe(target, config);报了下面的错误

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

原来是我用的jquery选择器，$("#divTest"),这样出来的结果是数据

而observer.observe(target, config);方法需要的是一个节点。

相关：

http://www.cnblogs.com/snandy/archive/2016/04/10/5362824.html
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

转载于:https://www.cnblogs.com/youjiao/p/5896469.html

weixin_34238642

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html DOM 变化通知，很好很强大

刚做一个项目，某个div标签显示后需要接收一个事件，用于主动调用 window.resize()；从网上找了了，发现MutationObserver。给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力。测试代码如下。保存成html文件即可运行 1 <html> 2 <head> 3 <title><...
复制链接

扫一扫