[1]删除节点

[2]插入节点

[3]特性节点

[4]文本节点

前面的话

　　变动(mutation)事件能在DOM中的某一部分发生变化时给出提示，这类事件非常有用，但都只能使用DOM2级事件处理程序，且由于浏览器兼容性不好，所以用的不广泛

 

删除节点

　　删除节点时，涉及到DOMNodeRemoved、DOMNodeRemovedFromDocument和DOMSubtreeModified这三个事件，下面将详细介绍

DOMNodeRemoved

　　在使用removeChild()或replacechild()从DOM中删除节点时，会触发DOMNodeRemoved事件。而event.relatedNode属性中包含着对目标节点父节点的引用。在这个事件触发时，节点尚未从其父节点删除，因此其parentNode属性仍然指向父节点。该事件会冒泡

　　[注意]IE8-浏览器不支持

1

DOMNodeRemovedFromDocument

　　如果被移除的节点包含子节点，那么在其所有子节点以及这个被移除的节点上会相继触发DOMNodeRemovedFromDocument事件，这个事件不会冒泡，目标target指向被移除的节点

　　[注意]该事件只有chrome/safari/opera浏览器支持

1

DOMSubtreeModified

　　在DOM结构中发生任何变化时都会触发DOMSubtreeModified事件，该事件在其他任何事件触发后都会触发

　　该事件的目标是被移除节点的父节点

　　[注意]IE8-浏览器不支持

1

顺序

　　删除节点时，事件触发的先后顺序是DOMNodeRemoved事件、DOMNodeRemovedFromDocument事件和DOMSubtreeModified事件

1

插入节点

　　插入节点时涉及到DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件及DOMSubtreeModified事件，下面将详细介绍

DOMNodeInserted

　　在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时，首先触发DOMNodeInserted事件

　　这个事件的目标是被插入的节点，而event.relatedNode属性中包含一个对父节点的引用

　　在这个事件触发时，节点已经被插入到了新的父节点中。这个事件是冒泡的，因此可以在DOM的各个层次上处理它

　　[注意]IE8-浏览器不支持

DOMNodeInsertedIntoDocument

　　在新插入的节点上面会触发DOMNodeInsertedIntoDocument事件。这个事件不冒泡，因此必须在插入节点之前为它添加这个事件处理程序。这个事件的目标是被插入的节点

　　[注意]该事件只有chrome/safari/opera浏览器支持

顺序

　　插入节点时，事件触发的先后顺序是DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件和DOMSubtreeModified事件　

特性节点

DOMAttrmodified

　　当特性被修改后，DOMAttrmodified事件被触发

　　[注意]该事件只有firefox和IE8+浏览器支持

 

文本节点

DOMCharacterDataModified

　　当文本节点的值发生变化时，触发DOMCharacterDataModified事件

　　[注意]该方法只有chrome/safari/opera浏览器支持

abc

最后

　　上面7个变动事件，浏览器兼容性都不是太好。唯三过得去就是DOMNodeInserted、DOMNodeRemoved和DOMSubtreeModified这三个事件，不兼容IE8-浏览器

好文链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。