"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > मैं जावास्क्रिप्ट में DOM परिवर्तनों का प्रभावी ढंग से पता कैसे लगा सकता हूँ और प्रतिक्रिया कैसे दे सकता हूँ?
मैं जावास्क्रिप्ट में DOM परिवर्तनों का प्रभावी ढंग से पता कैसे लगा सकता हूँ और प्रतिक्रिया कैसे दे सकता हूँ?
2024-12-16 को प्रकाशित
ब्राउज़ करें:848
DOM परिवर्तनों का प्रभावी ढंग से पता लगाना
उपयोगकर्ता इंटरैक्शन पर प्रतिक्रिया देने वाले गतिशील वेब एप्लिकेशन बनाने के लिए DOM में परिवर्तनों का अवलोकन करना महत्वपूर्ण है। एक व्यापक रूप से उपयोग किए जाने वाले दृष्टिकोण में म्यूटेशनऑब्जर्वर का लाभ उठाना शामिल है, एक आधुनिक एपीआई जो आपको DOM संशोधनों को देखने की अनुमति देता है। यह दृष्टिकोण IE11, फ़ायरफ़ॉक्स और WebKit सहित अधिकांश आधुनिक ब्राउज़रों द्वारा समर्थित है। var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; रिटर्न फ़ंक्शन (ओबीजे, कॉलबैक) { यदि (!obj || obj.nodeType !== 1) { वापस करना; } यदि (म्यूटेशनऑब्जर्वर) { var म्यूटेशनऑब्जर्वर = नया म्यूटेशनऑब्जर्वर(कॉलबैक); उत्परिवर्तनऑब्जर्वर.अवलोकन(ओबीजे, {चाइल्डलिस्ट: सत्य, सबट्री: सत्य}); वापसी उत्परिवर्तन ऑब्जर्वर; } अन्यथा यदि (window.addEventListener) {// ब्राउज़र समर्थन फ़ॉलबैक obj.addEventListener('DOMNodeInserted', कॉलबैक, गलत); obj.addEventListener('DOMNodeRemoved', कॉलबैक, गलत); } } })();
यह फ़ंक्शन तर्क के रूप में एक तत्व (obj) और एक कॉलबैक फ़ंक्शन (कॉलबैक) लेता है। जब भी तत्व या उसके बच्चों में कोई परिवर्तन किया जाता है तो कॉलबैक निष्पादित किया जाएगा।
var observeDOM = (function() {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
return function(obj, callback) {
if (!obj || obj.nodeType !== 1) {
return;
}
if (MutationObserver) {
var mutationObserver = new MutationObserver(callback);
mutationObserver.observe(obj, {childList: true, subtree: true});
return mutationObserver;
} else if (window.addEventListener) { // browser support fallback
obj.addEventListener('DOMNodeInserted', callback, false);
obj.addEventListener('DOMNodeRemoved', callback, false);
}
}
})();यह उदाहरण निम्नलिखित दर्शाता है:
सूची में एक आइटम जोड़नासूची से एक आइटम हटाना
- का उपयोग करना सूची में परिवर्तनों का पता लगाने के लिए MutationObserver। इसका उपयोग विभिन्न कार्यों को करने के लिए किया जा सकता है, जैसे यूआई को संशोधित करना या बैकएंड डेटा को अपडेट करना।
नवीनतम ट्यूटोरियल
अधिक>
-
PHP और C ++ फ़ंक्शन अधिभार प्रसंस्करण के बीच का अंतर] यह अवधारणा, जबकि C में आम, PHP में एक अनूठी चुनौती है। चलो PHP फ़ंक्शन ओवरलोडिंग की पेचीदगियों में तल्लीन करें और यह प्रदान करने वाली संभावनाओं का प...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया -
Ubuntu 12.04 MySQL स्थानीय कनेक्शन त्रुटि फिक्स गाइड] निराशाजनक अनुभव। यह समस्या तब उत्पन्न होती है जब MySQL सर्वर को निर्दिष्ट सॉकेट के माध्यम से ठीक से कॉन्फ़िगर या सुलभ नहीं किया जाता है। यदि यह स्था...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
मुझे MySQL त्रुटि #1089 क्यों मिल रही है: गलत उपसर्ग कुंजी?] आइए इस त्रुटि और इसके रिज़ॉल्यूशन की बारीकियों में तल्लीन करें। उपसर्ग कुंजियों को स्ट्रिंग कॉलम की एक विशिष्ट उपसर्ग लंबाई को अनुक्रमित करने के लिए...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
कैसे regex का उपयोग करके PHP में कुशलता से कोष्ठक के भीतर पाठ निकालें] एक दृष्टिकोण PHP के स्ट्रिंग हेरफेर कार्यों का उपयोग करने के लिए है, जैसा कि नीचे प्रदर्शित किया गया है: $ फुलस्ट्रिंग = "इस (पाठ) को छोड़क...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
जावा स्ट्रिंग्स के लिए प्रभावी चेकिंग विधि जो गैर-खाली और गैर-नल हैं1.6 और बाद में, isempty () विधि शून्यता के लिए जांच करने के लिए एक संक्षिप्त तरीका प्रदान करती है: अगर (str! = Null &&! Str.isempty ()) उपयोग: ...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
जब दाहिने टेबल में जहां क्लॉज में फ़िल्टर किया जाता है, तो बाएं जुड़ाव इंट्रा-कनेक्शन की तरह क्यों दिखते हैं?] हालाँकि, कभी -कभी, वाम ज्वाइन अपेक्षित रूप से काफी व्यवहार नहीं करता है। निम्नलिखित क्वेरी की कल्पना करें: a.foo, बी। सी। फोबार एक के रूप में टेब...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
PostgreSQL में प्रत्येक अद्वितीय पहचानकर्ता के लिए अंतिम पंक्ति को कुशलता से कैसे पुनः प्राप्त करें?एक डेटासेट के भीतर प्रत्येक अलग पहचानकर्ता के साथ जुड़ी अंतिम पंक्ति। निम्नलिखित डेटा पर विचार करें: आईडी दिनांक एक और_info 1 2014-02-01 kjkj...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
मैं फॉर्मडाटा () के साथ कई फ़ाइल अपलोड को कैसे संभाल सकता हूं?] इस उद्देश्य के लिए formData () विधि का उपयोग किया जा सकता है, जिससे आप एक ही अनुरोध में कई फाइलें भेज सकते हैं। document.getElementByid ('file...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
गो लैंग्वेज कचरा संग्रह में कटा हुआ मेमोरी से कैसे निपटें?] स्लाइस के साथ काम करते समय, संभावित मेमोरी लीक से बचने के लिए कचरा संग्रह व्यवहार को समझना महत्वपूर्ण होता है। r: = (*q) [0] *क्यू = (*क्यू)...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
जावा डेवलपर्स डेटाबेस क्रेडेंशियल्स को डिकम्पिलेशन से कैसे बचाते हैं?] यह एक सुरक्षा चिंता पैदा करता है यदि संवेदनशील डेटा, जैसे डेटाबेस क्रेडेंशियल्स, कोड के भीतर हार्ड-कोडित है। इस जानकारी को सुरक्षित रखने के लिए, इसे...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
PHP का DateTime :: संशोधित ('+1 महीने') अप्रत्याशित परिणाम उत्पन्न करता है?] जैसा कि प्रलेखन में कहा गया है, इन कार्यों के "सावधान", क्योंकि वे उतने सहज नहीं हैं जितना वे प्रतीत हो सकते हैं। $ दिनांक-> संशोधित करें ...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
मैं PHP में यूनिकोड स्ट्रिंग्स से URL के अनुकूल स्लग को कुशलता से कैसे उत्पन्न कर सकता हूं?] यह लेख स्लगों को कुशलता से उत्पन्न करने के लिए एक संक्षिप्त समाधान प्रस्तुत करता है, विशेष वर्णों और गैर-एएससीआईआई वर्णों को URL- अनुकूल स्वरूपों मे...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
संस्करण 5.6.5 से पहले MySQL में टाइमस्टैम्प कॉलम के साथ current_timestamp का उपयोग करने पर क्या प्रतिबंध थे?] Current_timestamp क्लॉज। यह सीमा INT, BigInt, और SmallInt पूर्णांक को वापस बढ़ाती है जब उन्हें शुरू में 2008 में पेश किया गया था। यह सीमा विरासत क...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
पायथन मेटाक्लास कार्य सिद्धांत और वर्ग निर्माण और अनुकूलन] जिस तरह कक्षाएं उदाहरण बनाती हैं, मेटाक्लास कक्षाएं बनाते हैं। वे वर्ग निर्माण प्रक्रिया पर नियंत्रण की एक परत प्रदान करते हैं, जो वर्ग व्यवहार और व...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
-
HTML स्वरूपण टैगHTML स्वरूपण तत्व ] HTML हमें CSS का उपयोग किए बिना पाठ को प्रारूपित करने की क्षमता प्रदान करता है। HTML में कई स्वरूपण टैग हैं। इन टैगों ...प्रोग्रामिंग 2025-05-22 को पोस्ट किया गया
चीनी भाषा का अध्ययन करें
- 1 आप चीनी भाषा में "चलना" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 2 आप चीनी भाषा में "विमान ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 3 आप चीनी भाषा में "ट्रेन ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 4 आप चीनी भाषा में "बस ले लो" कैसे कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 5 चीनी भाषा में ड्राइव को क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 6 तैराकी को चीनी भाषा में क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 7 आप चीनी भाषा में साइकिल चलाने को क्या कहते हैं? #का चीनी उच्चारण, #का चीनी सीखना
- 8 आप चीनी भाषा में नमस्ते कैसे कहते हैं? 你好चीनी उच्चारण, 你好चीनी सीखना
- 9 आप चीनी भाषा में धन्यवाद कैसे कहते हैं? 谢谢चीनी उच्चारण, 谢谢चीनी सीखना
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3