2015 का अपडेट, नया MutationObserverआधुनिक ब्राउज़रों द्वारा समर्थित है:
क्रोम 18+, फ़ायरफ़ॉक्स 14+, IE 11+, सफारी 6+
यदि आपको पुराने का समर्थन करने की आवश्यकता है, तो आप नीचे दिए गए अन्य दृष्टिकोणों की तरह गिरने की कोशिश कर सकते हैं जैसे कि इस 5 (!) वर्ष पुराने उत्तर में नीचे दिए गए हैं। ड्रेगन हो। का आनंद लें :)
कोई और दस्तावेज़ बदल रहा है? क्योंकि अगर domChangedकिसी फ़ंक्शन या कस्टम ईवेंट के साथ आपको केवल अपने स्वयं के API बनाने के लिए आवश्यक परिवर्तनों पर पूर्ण नियंत्रण है - और हर जगह आप चीजों को संशोधित करते हुए इसे ट्रिगर / कॉल करते हैं।
डोम स्तर -2 है उत्परिवर्तन घटना प्रकार है, लेकिन IE के पुराने संस्करण इसका समर्थन नहीं करते। ध्यान दें कि म्यूटेशन ईवेंट्स को DOM3 ईवेंट्स स्पेक में दर्शाया गया है और एक परफॉर्मेंस पेनल्टी है ।
आप onpropertychangeIE में उत्परिवर्तन घटना का अनुकरण करने की कोशिश कर सकते हैं (और यदि उनमें से कोई भी उपलब्ध है तो ब्रूट-फोर्स दृष्टिकोण पर वापस आ सकते हैं)।
एक के लिए पूरा domChange अंतराल एक से अधिक को मार हो सकता है। कल्पना करें कि आपको पूरे दस्तावेज़ की वर्तमान स्थिति को संग्रहीत करने की आवश्यकता है, और प्रत्येक तत्व की प्रत्येक संपत्ति की जांच करने के लिए समान होना चाहिए।
हो सकता है कि यदि आप केवल तत्वों और उनके आदेश (जैसा कि आपने अपने प्रश्न में उल्लेख किया है) में रुचि रखते हैं, 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'");
});
यह IE 5.5+, FF 2+, क्रोम, सफारी 3+ और ओपेरा 9.6+ पर काम करता है