2015 আপডেট, নতুন MutationObserverআধুনিক ব্রাউজারগুলি দ্বারা সমর্থিত:
ক্রোম 18+, ফায়ারফক্স 14+, আইই 11+, সাফারি 6+
যদি আপনার বয়স্ক ব্যক্তিদের সমর্থন করার প্রয়োজন হয় তবে আপনি নীচে এই 5 (!) বছরের পুরানো উত্তরে উল্লিখিত মতগুলির মতো অন্যান্য পন্থায় ফিরে যাওয়ার চেষ্টা করতে পারেন । ড্রাগন আছে। উপভোগ করুন :)
আর কেউ ডকুমেন্ট বদলাচ্ছেন? কারণ কোনও পরিবর্তনের উপর যদি আপনার সম্পূর্ণ নিয়ন্ত্রণ থাকে তবে আপনাকে কেবল নিজের নিজস্ব domChangedAPI তৈরি করতে হবে - কোনও ফাংশন বা কাস্টম ইভেন্ট সহ - এবং আপনি জিনিসগুলিকে সংশোধন করে সর্বত্রই এটি ট্রিগার / কল করতে হবে।
করে DOM শ্রেনী-2 আছে পরিব্যক্তি ঘটনা ধরনের , কিন্তু অর্থাত্ পুরোনো সংস্করণ তা সমর্থন করে না। নোট যে পরিব্যক্তি ঘটনা 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+, এফএফ 2+, ক্রোম, সাফারি 3+ এবং অপেরা 9.6+ এ কাজ করে