الكشف عن التغييرات في دوم

Question

أريد تنفيذ وظيفة عند إضافة بعض ديف أو المدخلات إلى هتمل.هل هذا ممكن?

على سبيل المثال ، يتم إضافة إدخال نص ، ثم يجب استدعاء الوظيفة.

Answer 1

تحديث 2015 ، جديد MutationObserver معتمد من قبل المتصفحات الحديثة:

كروم 18 + ، فايرفوكس 14+ ، أي 11+ ، سفاري 6+

إذا كنت بحاجة إلى دعم الأقدم ، فيمكنك محاولة العودة إلى الأساليب الأخرى مثل تلك المذكورة في هذا 5 (!) سنة الجواب أدناه.يكون هناك التنين.استمتع :)

---

شخص آخر هو تغيير الوثيقة?لأنه إذا كان لديك سيطرة كاملة على التغييرات ، فأنت تحتاج فقط إلى إنشاء التغييرات الخاصة بك domChanged واجهة برمجة التطبيقات - مع وظيفة أو حدث مخصص - وتشغيل/الاتصال به في كل مكان تقوم فيه بتعديل الأشياء.

ال مستوى دوم-2 لديه أنواع أحداث الطفرات, ، ولكن النسخة القديمة من إي لا تدعم ذلك.لاحظ أن أحداث الطفرة هي تم إيقافه في مواصفات أحداث دوم3 ولها عقوبة الأداء.

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

ل كامل دومشانج فاصل زمني يمكن أن يكون الإفراط في القتل.تخيل أنك بحاجة إلى تخزين الحالة الحالية للمستند بأكمله ، وفحص كل خاصية لكل عنصر لتكون هي نفسها.

ربما إذا كنت مهتما فقط بالعناصر وترتيبها (كما ذكرت في سؤالك) ، أ getElementsByTagName("*") يمكن أن تعمل.سيتم إطلاق هذا تلقائيا إذا قمت بإضافة عنصر أو إزالة عنصر أو استبدال العناصر أو تغيير بنية المستند.

كتبت دليلا على المفهوم:

(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);

الاستخدام:

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

هذا يعمل على إي 5.5+ ، فف 2+ ، كروم ، سفاري 3 + وأوبرا 9.6+

Answer 2

هذا هو النهج النهائي حتى الآن، مع أصغر رمز:

IE9 +، FF، WebKit:

باستخدام murationobserver والسقوط مرة أخرى إلى المهم أحداث الطفرة إذا لزم الأمر:
<م> (مثال أدناه إذا كانت التغييرات في DOM فقط المتعلقة بالعقد الملحقة أو إزالتها)

giveacodicetagpre. giveacodicetagpre.