الطريقة الأكثر فعالية للكشف عن/مراقبة دوم التغييرات ؟

Question

أنا بحاجة إلى آلية فعالة للكشف عن التغييرات في DOM.ويفضل أن يكون ذلك عبر متصفح, ولكن إذا كان هناك أي وسيلة فعالة وهي لا عبر متصفح, أنا يمكن تنفيذ هذه مع آمنة من الفشل عبر متصفح الأسلوب.

في حاجة إلى الكشف عن التغييرات التي من شأنها أن تؤثر على النص على صفحة ما ، لذلك أي جديد أو حذف أو تعديل العناصر ، أو تغييرات على النص الداخلية (innerHTML) قد تكون مطلوبة.

أنا لا أملك السيطرة على تغييرات (أنها يمكن أن تكون بسبب 3rd الطرف جافا سكريبت يشمل الخ) لذلك لا يمكن أن يكون اقترب من هذه الزاوية - أنا بحاجة إلى "رصد" عن التغييرات بطريقة أو بأخرى.

حاليا لقد نفذت "سريعة'n'dirty" الطريقة التي يتحقق body.innerHTML.length على فترات.هذا لا بالطبع الكشف عن التغييرات التي تؤدي إلى طول نفس إعادتهم ، ولكن في هذه الحالة هو "جيدة بما فيه الكفاية" - فرص حدوث ذلك ضئيلة للغاية في هذا المشروع ، عدم الكشف عن التغيير لن تؤدي إلى فقدان البيانات.

المشكلة body.innerHTML.length غير أنه مكلف.يمكن أن يستغرق ما بين 1 و 5 أجزاء من الثانية على سريع المتصفح هذا المستنقع الأمور كثيرا - أنا أيضا التعامل مع مجموعة كبيرة العش عدد من نوافذ الأطر المدمجة و كل ذلك يضيف.أنا متأكد من أن الغلاء من فعل هذا لأن innerHTML النص لا يتم تخزينها بشكل ثابت من قبل المتصفحات ، يجب أن تحسب من دوم في كل مرة يتم قراءتها.

أنواع الإجابات أنا أبحث عن أي شيء من "الدقيق" (على سبيل المثال الحدث) إلى "جيدة بما فيه الكفاية" - ربما شيء "سريعة'n'dirty" كما innerHTML.طول الأسلوب ، ولكن أن ينفذ بشكل أسرع.

تحرير:أود أن أشير أيضا إلى أنه في حين أنه سيكون من "لطيفة" للكشف عن دقة العنصر الذي تم تعديله ، فإنه ليس ضرورة مطلقة - مجرد حقيقة أنه كان هناك أي التغيير سوف تكون جيدة بما فيه الكفاية.نأمل أن هذا يوسع الشعب الردود.أنا سوف تحقق طفرة الأحداث, ولكن أنا لا تزال بحاجة تراجع عن أي دعم ، حتى أي أحمق, الإبداعية, خارج من ساحة الأفكار سيكون موضع ترحيب للغاية.

Answer 1

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

مسج الآن يدعم طريقة إرفاق الأحداث الحالية والمستقبلية عناصر المقابلة محدد: http://docs.jquery.com/Events/live#typefn

آخر للاهتمام تجد - http://james.padolsey.com/javascript/monitoring-dom-properties/

Answer 2

لتحقيق هذا الأمر حتى الآن، والمعيار DOM4 يلغي الطفرة الأحداث ويستبدل لهم المراقبون الطفرة: <لأ href = "https://developer.mozilla.org/en-US/docs/Web/API/ MutationObserver "> https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 3

أحداث الطفرة هي توصية W3 ما كنت تبحث عن ..

وإذا لم تكن متأكدا معتمدة أنهم جميعا حولها .. (لن IE الأرجح لن الدعم لهم ..)

Answer 4

هل يمكن أن حاول استخدام الأحداث DOMNodeInserted وDOMNodeRemoved. على تلقي Quirksmode، وأنها نوع من العمل في معظم المتصفحات، مع استثناء ملحوظ من IE ...

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

Answer 5

لقد كتبت المساعد أن يفعل ذلك بالضبط - مسج.تهيئة

يمكنك استخدامه بنفس الطريقة .each وظيفة

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

الفرق من .each هو - أنه يأخذ محدد ، في هذه الحالة .some-element وانتظر عناصر جديدة مع هذا محدد في المستقبل, إذا كان هذا العنصر سيتم وأضاف أنه سيتم تهيئة أيضا.

في حالة تهيئة وظيفة فقط تغيير عنصر اللون الأزرق.حتى إذا نحن سوف تضيف عنصر جديد (بغض النظر إذا كان مع اياكس أو حتى F12 المفتش أو أي شيء) مثل:

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

البرنامج المساعد سوف init ذلك على الفور.أيضا البرنامج المساعد يجعل من عنصر واحد هو تهيئة مرة واحدة فقط.حتى إذا قمت بإضافة عنصر ، ثم .deatch() من الجسم و من ثم إضافته مرة أخرى, لن يتم تهيئته من جديد.

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

البرنامج المساعد هو على أساس MutationObserver - أنه سيتم العمل على IE9 و 10 مع تبعيات كما هو مفصل في التمهيدي الصفحة.

Answer 6

مسج التحور هل هذا أيضا بشكل افتراضي وهو يدعم مثل height, width, scrollHeight الخ...ولكن أيضا يمكن تمديدها مع قليلا من رمز إضافية لإضافة أحداث جديدة مثل انظر إذا كان النص قد تغير الخ...

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

آمل أن يساعد