请问如何监听dom结构发生了改变？

王集鹄 2011-02-12 04:28:21

变化包括：节点添加、修改（样式、文本改变）、移除。

<html>

<body>

<script>

	setInterval(function() {

		var div = document.createElement("div");

		div.innerHTML = +new Date;

		document.body.appendChild(div);

	}, 5000);



/* TODO */

</script>

</body>

</html>

难道只能用计时器+遍历？一周后没有答案放到非技术区散分结贴。

谢谢关注。

...全文

1022 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiaoqian321 2013-07-31

打赏
举报

遇到了同样的问题，不知楼主有答案了没；计时器+遍历不行吧，除非把原来的DOM也保存下来，定时和新的DOM比较，才知道变没变。

monexus 2011-02-14

打赏
举报

W3C - MutationEvent
应用实例 FireBug 的插件 FireDiff

kaifadi 2011-02-13

打赏
举报

我一般都只会用FF打开结构看！

不短每5秒增加一个时间或者特征，判断结构是否改变，好象除了这个也不知道还有什么了。

越过越咸 2011-02-13

打赏
举报

dom 变化是浏览器解释器自身控制的结构
只能通过模拟检控

firebugdotname 2011-02-13

打赏
举报

标准里边是定义有的这些事件貌似浏览器都不支持
mark.

aj3423 2011-02-13

打赏
举报

在firebug的 HTML页里，对一个dom点右键可以
break on attribute change
break on Child add/remove
break on element remove
这三个断点貌似包含了所有需求吧，可以把firebug解包看一下，里面都是js，说不定会有帮助

潮起潮落 2011-02-12

打赏
举报

能控制所有源代码的话，设置全局标识，在改变dom结构的操作之后改变标识？
愚见。愚见。

C_S_D_N_110 2011-02-12

打赏
举报

http://img.myaspx.com/Images_Myaspx_CSDN/2011021207261019908.jpg

goosman 2011-02-12

打赏
举报

[Quote=引用 8 楼 sohighthesky 的回复:]

也想知道这个问题啊，

js遍历监听数量也不是个办法吧，假如替换一个节点应该就出不来了吧

如果只是appendChild或removeChild应该可以重新这个方法制造事件，可是innerHTML这玩意就拿他没办法了啊
[/Quote]

innerHTML, innerText, css等都独立成方法应该是可以的啊, jquery中的css(), html(), text()这几个方法中增加事件, 程序都按照规范来开发, 我觉得应该可以满足的啊

sohighthesky 2011-02-12

打赏
举报

也想知道这个问题啊，

js遍历监听数量也不是个办法吧，假如替换一个节点应该就出不来了吧

如果只是appendChild或removeChild应该可以重新这个方法制造事件，可是innerHTML这玩意就拿他没办法了啊

goosman 2011-02-12

打赏
举报

上面的方法借鉴自jquery自定义事件..

goosman 2011-02-12

打赏
举报

来围观清洁工大哥搞不定的问题.....

自己的一个想法:
变化包括：节点添加、修改（样式、文本改变）、移除。
把所有的变化自己管理起来, 通过自己的接口做这些操作, 那监听就简单了..

Crazywa 2011-02-12

打赏
举报

人工制造事件模型。
创造一个MyEvent对象，用来存储所有自定义事件函数
格式像这样 MyEvent[dom元素的sid属性][事件名称如onappend]=[]这个数组里存入用自定义的addMyEvent函数添加的函数。
然后dom同addMyEvent添加事件的时候，如果有sid则直接添加事件，如果没有sid则sid = 某全局变量++，然后添加事件。
之后写一个addChild()函数，代替appendChild函数，同时执行MyEvent里面存储的函数。
虽说工作量大一些。。其实也不大。。