mutation-observers | 易学教程

Number of nodes returned in MutationRecord.addedNodes nodelist (mutationObserver)

阅读更多关于 Number of nodes returned in MutationRecord.addedNodes nodelist (mutationObserver)

问题 MutationRecord.addedNodes returns NodeList with nodes detected as added in my document. When I use obj.appendChild() method, mutationObserver detects it and returns this ONE node in MutationRecord.addedNodes as nodelist [node]. When I use .appendChild() in loop, mutationObserver fires as many times as the number of loops amounts. I'm just wondering if there is any case when mutationOvserver will detect more than one node added simultaneously and fire ONCE and return those nodes in

How to detect changes made by CSS3 animation or web animations API?

阅读更多关于 How to detect changes made by CSS3 animation or web animations API?

问题 How can I detect changes made by CSS3 animations or web animations ( Element.animate )?? (Sorry for my bad English! this is my first question in Stackoverflow) I know about MutationObserver, it responds only if I change the inline style or if I use requestAnimationFrame (since I change the inline style using it). But if I use CSS3 animations or Web animations, MutationObserver doesn't respond since they don't change the inline style. See this... There are two divs here... div1, div2. div1's

MutationObserver on span text change does not trigger

阅读更多关于 MutationObserver on span text change does not trigger

问题 This is just a boiled down example not an actual thing. Still MutationObserver isn't firing so my assumption on how it works is wrong. JSFiddle $(function() { var editButtonVisibility = function() { console.log('bam'); } $('#RiskPostcodeSummary span').on("change", function() { console.log("pew pew"); }); var observer = new MutationObserver(function(e) { editButtonVisibility(); }); observer.observe($('#RiskPostcodeSummary span')[0], { characterData: true }); }); <script src="https://ajax

Should an IntersectionObserver be disconnected when element is removed

阅读更多关于 Should an IntersectionObserver be disconnected when element is removed

问题 In a Single Page Application, elements are often removed and replaced. On elements that are removed from the DOM there could be an IntersectionObserver(or any other kind) For events I never bothered to care because they are bound and triggered on the target so they should be rather harmless to keep. For the IntersectionObserver I'm somewhat worried all instances are checked on any view change. Consider the following part of my Lazy.ts setIntersectionObserver(config:LazyConfig) { let

Mutation Observer Not Detecting Text Change

阅读更多关于 Mutation Observer Not Detecting Text Change

问题 I'm scratching my head as to why MutationObserver doesn't detect text changes done using textContent. HTML <div id="mainContainer"> <h1>Heading</h1> <p>Paragraph.</p> </div> JavaScript function mutate(mutations) { mutations.forEach(function(mutation) { alert(mutation.type); }); } jQuery(document).ready(function() { setTimeout(function() { document.querySelector('div#mainContainer > p').textContent = 'Some other text.'; }, 2000); var target = document.querySelector('div#mainContainer > p') var

Why doesn't MutationObserver code run on Chrome 30?

阅读更多关于 Why doesn't MutationObserver code run on Chrome 30?

问题 From http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers I got the following code: var insertedNodes = []; var observer = new WebKitMutationObserver(function(mutations) { alert('run'); mutations.forEach(function(mutation) { for (var i = 0; i < mutation.addedNodes.length; i++) insertedNodes.push(mutation.addedNodes[i]); }) }); observer.observe(document, { childList: true }); console.log(insertedNodes); var divElement = document.createElement('div'); divElement

Should MutationObservers be removed/disconnected when the attached DOM node is removed like removeEventListener for events?

阅读更多关于 Should MutationObservers be removed/disconnected when the attached DOM node is removed like removeEventListener for events?

A nearly identical question is found here: Should an IntersectionObserver be disconnected when element is removed I haven't found documentation that states what should be done when an element--with an attached MutationObserver (MO)--is removed from the DOM. The API doesn't provide a remove method like removeEventListener , just a temporary disconnect method that only concerns the child nodes. Garbage collection would come along eventually, but seems like it could get messy/bloated in a SPA webapp. I could use the delete keyword to remove the variable holding the MO, but I've read caveats in

Disconnect Mutation Observer from Callback Function

阅读更多关于 Disconnect Mutation Observer from Callback Function

问题 How can I disconnect my mutation observer from its callback function? The changes are being observed as they should, but I would like to disconnect the observer after the first change. Since the observer variable is out of scope, it's not disconnecting as it should. How can I pass the observer variable to the callback function so the code will work? function mutate(mutations) { mutations.forEach(function(mutation) { if ( mutation.type === 'characterData' ) { console.log('1st change.');

What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM

阅读更多关于 What is the most efficient way of detecting when an element with a particular ID is inserted in the DOM

问题 As the title suggests, I want to detect the exact timestamp when an element with a particular id or CSS class is inserted into the DOM (and possibly detect when it is removed). The most obvious method is to poll the document periodically, by calling document.getElementById with the id of the element I want to find, but this method is not very accurate and can be very performance intensive if I have multiple elements I want to detect. I took a look at Mutation Events and Mutation Observers,

What is the order of MutationRecords received by MutationObservers?

阅读更多关于 What is the order of MutationRecords received by MutationObservers?

问题 The code from react-measure takes advantage of the new MutationObservers present in current browsers. MSDN has this to say about it: Additionally, mutation observers are designed to record multiple changes before notifying your observer. They batch mutation records to avoid spamming your app with events. By contrast, mutation events are synchronous and interrupt normal code execution to notify your app of mutations. Despite the delayed notification model employed by mutation observers, your