Erkennen Sie Änderungen im 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-Typenaber ä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 der Antwort

Habe ich kürzlich ein plugin geschrieben, was genau das macht - jquery.initialisieren

Sie es verwenden die gleiche Weise wie .each Funktion

$(".some-element").initialize( function(){
    $(this).css("color", "blue"); 
});

Den Unterschied von .each ist - es braucht dein Selektor, in diesem Fall .some-element und warten, bis neue Elemente mit diesem Selektor in der Zukunft, wenn ein solches element Hinzugefügt wird, wird es initialisiert zu werden.

In unserem Fall die Funktion initialisieren nur ändern element Farbe blau. Also, wenn wir add new element (egal, ob mit ajax-oder auch F12 Inspektor oder nichts) wie:

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

Plugin wird init Sie sofort. Auch plugin sorgt dafür, dass ein element nur einmal initialisiert. Also, wenn Sie element hinzufügen, dann .detach() es aus dem Körper und dann wieder hinzufügen, wird es nicht initialisiert werden wieder.

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once

Plugin basiert auf MutationObserver - es funktioniert unter IE9 und 10 mit Abhängigkeiten, die so detailliert auf die readme-Seite.

InformationsquelleAutor der Antwort pie6k

Wie etwa die Verlängerung eines jquery?

   (function () {
        var ev = new $.Event('remove'),
            orig = $.fn.remove;
        var evap = new $.Event('append'),
           origap = $.fn.append;
        $.fn.remove = function () {
            $(this).trigger(ev);
            return orig.apply(this, arguments);
        }
        $.fn.append = function () {
            $(this).trigger(evap);
            return origap.apply(this, arguments);
        }
    })();
    $(document).on('append', function (e) { /*write your logic here*/ });
    $(document).on('remove', function (e) { /*write your logic here*/ ) });

Jquery 1.9+ hat eine eingebaute Unterstützung für diese(ich habe gehört nicht getestet).

InformationsquelleAutor der Antwort StartCoding

Dies ist ein Beispiel für die Verwendung MutationObserver von Mozilla angepasst von dieser blog-post

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

//Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

//Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

//Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

//Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

//Start observing the target node for configured mutations
observer.observe(targetNode, config);

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

InformationsquelleAutor der Antwort Anthony Awuley