Erkennen von änderungen in den DOM

2015 update, neue MutationObserver ist mit modernen Browsern möglich:

Chrome 18+, Firefox 14+, IE 11+, Safari 6+

Wenn Sie Bedarf an Unterstützung von älteren, Sie dürfen versuchen, fallen zurück auf andere Ansätze, wie die erwähnten in diesem 5 (!) jährigen Antwort unten. Es werden Drachen. Genießen Sie 🙂

Jemand anderes ändern des Dokuments? Weil, wenn Sie haben die volle Kontrolle über die änderungen, die Sie gerade brauchen, um erstellen Sie Ihr eigenes domChanged API - Funktion oder benutzerdefinierte Ereignis - und trigger/rufen Sie es überall Sie ändern Dinge.

Den DOM-Level-2-hat Mutation-event-Typen, aber ältere version von IE nicht unterstützt wird. Beachten Sie, dass die mutation events sind veraltet in der DOM3 Events Spezifikation und haben eine Einbußen bei der Leistung.

Können Sie versuchen, zu emulieren mutation Veranstaltung mit onpropertychange im IE (und fallen zurück auf die brute-force-Ansatz, wenn nicht von Ihnen ist).

Für eine voll domChange ein Intervall könnte eine over-kill. Vorstellen, dass Sie brauchen, um zu speichern Sie den aktuellen Zustand des gesamten Dokuments, und prüfen jedes element ist in jeder Eigenschaft derselben.

Vielleicht, wenn Sie nur daran interessiert sind, in die Elemente und Ihre Ordnung (wie Sie in Ihrer Frage erwähnt), ein getElementsByTagName("*") arbeiten können. Dieser wird automatisch ausgelöst, wenn Sie ein element entfernen, ein element, Elemente ersetzen oder ändern die Struktur des Dokuments.

Schrieb ich eine proof-of-concept:

(function (window) {
    var last = +new Date();
    var delay = 100; //default delay

    //Manage event queue
    var stack = [];

    function callback() {
        var now = +new Date();
        if (now - last > delay) {
            for (var i = 0; i < stack.length; i++) {
                stack[i]();
            }
            last = now;
        }
    }

    //Public interface
    var onDomChange = function (fn, newdelay) {
        if (newdelay) delay = newdelay;
        stack.push(fn);
    };

    //Naive approach for compatibility
    function naive() {

        var last = document.getElementsByTagName('*');
        var lastlen = last.length;
        var timer = setTimeout(function check() {

            //get current state of the document
            var current = document.getElementsByTagName('*');
            var len = current.length;

            //if the length is different
            //it's fairly obvious
            if (len != lastlen) {
                //just make sure the loop finishes early
                last = [];
            }

            //go check every element in order
            for (var i = 0; i < len; i++) {
                if (current[i] !== last[i]) {
                    callback();
                    last = current;
                    lastlen = len;
                    break;
                }
            }

            //over, and over, and over again
            setTimeout(check, delay);

        }, delay);
    }

    //
    // Check for mutation events support
    //

    var support = {};

    var el = document.documentElement;
    var remain = 3;

    //callback for the tests
    function decide() {
        if (support.DOMNodeInserted) {
            window.addEventListener("DOMContentLoaded", function () {
                if (support.DOMSubtreeModified) { //for FF 3+, Chrome
                    el.addEventListener('DOMSubtreeModified', callback, false);
                } else { //for FF 2, Safari, Opera 9.6+
                    el.addEventListener('DOMNodeInserted', callback, false);
                    el.addEventListener('DOMNodeRemoved', callback, false);
                }
            }, false);
        } else if (document.onpropertychange) { //for IE 5.5+
            document.onpropertychange = callback;
        } else { //fallback
            naive();
        }
    }

    //checks a particular event
    function test(event) {
        el.addEventListener(event, function fn() {
            support[event] = true;
            el.removeEventListener(event, fn, false);
            if (--remain === 0) decide();
        }, false);
    }

    //attach test events
    if (window.addEventListener) {
        test('DOMSubtreeModified');
        test('DOMNodeInserted');
        test('DOMNodeRemoved');
    } else {
        decide();
    }

    //do the dummy test
    var dummy = document.createElement("div");
    el.appendChild(dummy);
    el.removeChild(dummy);

    //expose
    window.onDomChange = onDomChange;
})(window);

Verwendung:

onDomChange(function(){ 
    alert("The Times They Are a-Changin'");
});

Diese funktioniert unter IE 5.5+, FF 2+, Chrome, Safari 3+ und Opera 9.6+

InformationsquelleAutor

oder Sie können einfach Erstellen Sie Ihre eigene event, dass überall laufen

 $("body").on("domChanged", function () {
                //dom is changed 
            });


 $(".button").click(function () {

          //do some change
          $("button").append("<span>i am the new change</span>");

          //fire event
          $("body").trigger("domChanged");

        });

Vollständige Beispiel
http://jsfiddle.net/hbmaam/Mq7NX/

InformationsquelleAutor HB MAAM

Verwenden Sie die MutationObserver Schnittstelle, wie gezeigt, in der Gabriele Romanato ist blog

Chrome 18+, Firefox 14+, IE 11+, Safari 6+

//The node to be monitored
var target = $( "#content" )[0];

//Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; //DOM NodeList
    if( newNodes !== null ) { //If there are new nodes added
        var $nodes = $( newNodes ); //jQuery set
        $nodes.each(function() {
            var $node = $( this );
            if( $node.hasClass( "message" ) ) {
                //do something
            }
        });
    }
  });    
});

//Configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};

//Pass in the target node, as well as the observer options
observer.observe(target, config);

//Later, you can stop observing
observer.disconnect();

InformationsquelleAutor Anthony Awuley