JS 如何知道文档已经改变

Question

当一个DOM文档通过Ajax或者其他方式改变文档结构后(如增加一个div等等)，我如何知道文档已经改变

比如在同一个页面里面
我用ajax加了一个Div
然后页面没有刷新 另外一段js里面判断页面是否已经更改

我想做个简单的JQuery的
JQuery里面用了缓存 [u]如果页面没有改变[/u]同一个查询会先从缓存里面查起

Answer 1

这个问题我以前学习过
我记得完成这个有浏览器兼容性问题,
John Resig大侠提出了一个解决方案，参见
http://ejohn.org/blog/thoughts-on-queryselectorall/
可以参考peppy.js里面的一段代码
[code="js"]
// From John Resig -> http://ejohn.org/blog/thoughts-on-queryselectorall/
// Copyright 2008, John Resig (http://ejohn.org/)
// released under the MIT License
if ( doc.querySelectorAll ) {
(function(){
var oldpeppy = peppy.query;

        peppy.query = function(sel, context){
            context = context || doc;
            if ( context === doc ) {
                try {
                    return context.querySelectorAll(sel);
                } catch(e){}
            }

            return oldpeppy.apply(oldpeppy, arrayIt(arguments));
        };
    })();
} else {
    // If the DOM changes we need to clear the cache because it will no longer be reliable. 
    // Inspired by code from Sizzle -> http://github.com/jeresig/sizzle/tree/master.
    // Copyright 2008, John Resig (http://ejohn.org/)
    // released under the MIT License   
    var aEvent = doc.addEventListener || doc.attachEvent;
    function clearCache(){ cache = {}; }
    aEvent("DOMAttrModified", clearCache, false);
    aEvent("DOMNodeInserted", clearCache, false);
    aEvent("DOMNodeRemoved", clearCache, false);    
}

[/code]
当然这里的doc,根据上下文就是document了。
也就是说本来W3C组织是给出了标准的也就是
DOMAttrModified
DOMNodeInserted
DOMNodeRemoved
三个事件，不过IE不支持，好在John Resig大侠给出了这个方法，我没有详细测试过，这个需要你自己试试了