Die meisten effiziente Methode zur Erkennung/überwachung DOM verpasst?

Brauche ich einen effizienten Mechanismus für die Erkennung von änderungen an die DOM. Vorzugsweise cross-browser, aber wenn es keine wirksamen Mittel, die nicht cross-browser, kann ich implementieren diese mit einer fail-safe-cross-browser-Methode.

Insbesondere ich brauche, um änderungen zu erkennen, die beeinflussen würde, den text auf einer Seite, so dass jede neue, entfernte oder veränderte Elemente oder änderungen der innere text (innerHTML) erforderlich wären.

Ich habe keine Kontrolle über die änderungen (Sie konnte wegen 3rd-party javascript-includes, etc), also kann es nicht sein, näherte sich aus diesem Blickwinkel - ich muss "monitor" für Veränderungen irgendwie.

Derzeit habe ich implementiert eine "schnelle Lösung" - Methode, die prüft body.innerHTML.length in regelmäßigen Abständen. Dies wird natürlich nicht erkennen, die änderungen, die sich in der gleichen Länge wird zurückgegeben, aber in diesem Fall ist "gut genug" - die Chancen dafür sind äußerst gering, und in diesem Projekt, ohne zu erkennen, die eine änderung nicht zu Datenverlust führen.

Das problem mit body.innerHTML.length ist, dass es teuer ist. Es kann zwischen 1 und 5 Millisekunden auf einem schnell browser, und das Moor kann Dinge nach unten eine Menge - ich bin auch den Umgang mit large-ish Anzahl der iframes und es fügt sich alles. Ich bin mir ziemlich sicher, dass die Kostspieligkeit, dies zu tun ist, weil Sie die innerHTML-text ist nicht statisch gespeichert durch den Browser, und muss berechnet werden aus dem DOM jedes mal, wenn es gelesen wird.

Den Arten von Antworten, die ich bin auf der Suche nach etwas aus der "precise" (z.B. event) , die "gut genug" - vielleicht so etwas wie "schnelle Lösung" als die von innerHTML.length-Methode, aber das wird schneller ausgeführt.

BEARBEITEN:
Ich Weise auch darauf hin, dass, während es wäre "nett" zu erkennen, das genaue element, das geändert wurde, ist es nicht eine absolute Notwendigkeit - nur die Tatsache, dass es alle ändern, würden gut genug sein. Hoffentlich erweitert die Antworten der Leute. Ich werde untersuchen, Mutation-Events, aber ich brauche immer noch ein fallback für IE-Unterstützung, so dass jeder verrückte, kreative, außerhalb-der-Quadrat-Ideen wären sehr willkommen.

Nicht viel Glück das Letzte mal gefragt wurde: stackoverflow.com/questions/648996/...
Ja, ich sah, und Sie haben Recht...nicht so viel Glück. Doch, weil ich nicht verlangen, 100% Genauigkeit, und auch da brauche ich nicht genau zu bestimmen, welches element sich geändert hat, nur, dass es hat eine änderung, ich hoffe, die Leute kommen mit einigen kreativen Lösungen für mich...
Mögliche Duplikate von gibt es eine JavaScript - /jQuery-DOM-änderung Hörer?

InformationsquelleAutor Graza | 2010-03-16

  1. 10

    http://www.quirksmode.org/js/events/DOMtree.html

    jQuery unterstützt nun einen Weg, um Ereignisse anfügen, um den bestehenden und künftigen Elemente der entsprechenden Selektor: http://docs.jquery.com/Events/live#typefn

    Anderen interessant finden - http://james.padolsey.com/javascript/monitoring-dom-properties/

    Danke, das scheint, um alle Grundlagen abzudecken - DOMTree Veranstaltungen für nicht-IE und onPropertyChange für den IE. Ich habe mich noch nicht implementiert onPropertyChange Ereignis, sondern wird tun - siehe meinen Kommentar an @Gaby ' s post für ein update, was wurde bisher getan.
    jQuery live() Methode scheint nicht zu funktionieren, die besten im IE, also ich bin auch mit einem standard - bind() (dann unbind().bind() auf änderungen in den Fall, dass etwas neues Hinzugefügt wurde), aber mit der DOMTree-Ereignisse zusammen mit onPropertyChange, und eine setInterval-fallback, scheint den trick tun. watch() schien wie zu viel Aufwand (müsste manuell hinzufügen, um alle Elemente als ist es nicht ein standard-event-Typ, es ist nur eine Methode), und ich bin nicht sicher, dass es korrekt unterstützt in verschiedenen Browsern, während die beiden anderen Methoden abzudecken Schienen die meisten Basen.
    FYI: "Als jQuery-1.7 .live () - Methode ist deprecated. Verwenden .() zum anfügen von Ereignishandlern. Nutzer älterer Versionen von jQuery verwenden soll .delegate() den Vorzug zu geben .live()." docs
    Add ' L FYI: mozilla docs sagen, dass das betrachten von mutation-events ist veraltet und sollte ersetzt werden mit "mutation Beobachter". Ich weiß nicht, ob mutation Beobachter sind alle noch nutzbar, aber.

    InformationsquelleAutor jagamot

  2. 31

    Bringen diese aktuell sind, DOM4-standard nicht mit Mutation Events und ersetzt Sie durch Mutation Beobachter: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

    InformationsquelleAutor zeveck

  3. 8

    Mutation events sind die W3-Empfehlung, was Sie suchen..

    Nicht sicher, ob Sie unterstützt alle Rum.. (IE wird wahrscheinlich nicht unterstützt..)

    Ich bin jetzt mit diesen events - ich bin immer noch die überprüfung für die body.innerHTML.length in festgelegten Intervallen, aber wenn eines dieser Ereignisse ausgelöst werden, mache ich die Annahme, dass die periodische überprüfung ist nicht mehr erforderlich, und schalten Sie ihn aus. Ich bin noch zu untersuchen onPropertyChange und watch() als alternativen, und wird wahrscheinlich implementieren diese mit einer ähnlichen Idee, dass, wenn Sie ausgelöst werden, kündigen kann ich alle anderen Prüfungen - onPropertyChange vielleicht funktioniert unter IE, aber nicht mit anderen Browsern.
    Mutation events sind derzeit veraltet, zu Gunsten der Mutation Beobachter developer.mozilla.org/en-US/docs/Web/API/MutationObserver

    InformationsquelleAutor Gabriele Petrioli

  4. 1

    Könnten Sie versuchen, mit dem DOMNodeInserted und DOMNodeRemoved Veranstaltungen. Entsprechend Quirksmode, diese Art von Arbeit, die in den meisten Browsern mit Ausnahme des IE...

    http://www.quirksmode.org/dom/events/index.html

    Sie sind zwei der Mutation-Event-Typen, die eingeführt wurden in DOM-level-2. Eine Handvoll mehr event-Typen existieren.

    InformationsquelleAutor Chibu

  5. 1

    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 .deatch() 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 pie6k

  6. 0

    jQuery Mutieren tut dies auch standardmäßig unterstützt, wie height, width, scrollHeight etc... aber es kann auch erweitert werden, mit ein bisschen extra-code, um neue Ereignisse wie sehen, ob sich der text geändert hat etc...

    http://www.jqui.net/jquery-projects/jquery-mutate-official/

    Hoffe es hilft

    InformationsquelleAutor Val

Schreibe einen Kommentar