mutation-observers | 易学教程

Mutation Observer for creating new elements

阅读更多关于 Mutation Observer for creating new elements

I am trying to make a function go off when a particular div is created. In the simplest of terms, I have something like this: <a href="" id="foo">Click me!</a> <script> $("#foo").live("click",function(e) { e.preventDefault(); $(this).append($("<div />").html("new div").attr("id","bar")); }); </script> Before, I had mutation events listen for the creation of div#bar - something like this: $("#bar").live("DOMNodeInserted", function(event) { console.log("a new div has been appended to the page"); }); Is there an equivalent using Mutation Observers? I tried attrchange.js featured on Can you have a

'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

阅读更多关于 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

问题 I am creating a Chrome extension and trying to include a small text beside the SEND button of the gMail compose box. I am using a MutationObserver to know when the compose box window appears. I am doing this by observing an element with class no since the compose box element is created as child of this element (class no ). When the user clicks on the compose button and the compose box window appears, then I place an element beside the SEND button using the .after() method. SEND button class

Performance of MutationObserver to detect nodes in entire DOM

阅读更多关于 Performance of MutationObserver to detect nodes in entire DOM

I'm interested in using MutationObserver to detect if a certain HTML element is added anywhere in an HTML page. For example's sake, I'll say that I want to detect if any <li> 's are added anywhere in the DOM. All the MutationObserver examples I've seen so far only detect if a node is added to a particular container. For example: some HTML <body> ... <ul id='my-list'></ul> ... </body> MutationObserver definition var container = document.querySelector('ul#my-list'); var observer = new MutationObserver(function(mutations){ // Do something here }); observer.observe(container, { childList: true,

Most efficient method of detecting/monitoring DOM changes?

阅读更多关于 Most efficient method of detecting/monitoring DOM changes?

I need an efficient mechanism for detecting changes to the DOM. Preferably cross-browser, but if there's any efficient means which are not cross browser, I can implement these with a fail-safe cross browser method. In particular, I need to detect changes that would affect the text on a page, so any new, removed or modified elements, or changes to inner text (innerHTML) would be required. I don't have control over the changes being made (they could be due to 3rd party javascript includes, etc), so it can't be approached from this angle - I need to "monitor" for changes somehow. Currently I've

Mutation Observer for creating new elements

阅读更多关于 Mutation Observer for creating new elements

问题 I am trying to make a function go off when a particular div is created. In the simplest of terms, I have something like this: <a href=\"\" id=\"foo\">Click me!</a> <script> $(\"#foo\").live(\"click\",function(e) { e.preventDefault(); $(this).append($(\"<div />\").html(\"new div\").attr(\"id\",\"bar\")); }); </script> Before, I had mutation events listen for the creation of div#bar - something like this: $(\"#bar\").live(\"DOMNodeInserted\", function(event) { console.log(\"a new div has been

How to change the HTML content as it's loading on the page

阅读更多关于 How to change the HTML content as it's loading on the page

问题 I do A/B Testing on our site and I do most of my work is in a JS file that is loaded at the top of the page before anything else is rendered but after jQuery has loaded which comes in handy at times. Taking a very simple example of changing an H1 tag, I would normally inject a style in the head to set the H1 opacity to 0 and then on DOMContentLoaded, I would manipulate the H1 contents and then set the opacity to 1. The reason for this is to avoid a flash of the old content before the change

Most efficient method of detecting/monitoring DOM changes?

阅读更多关于 Most efficient method of detecting/monitoring DOM changes?

问题 I need an efficient mechanism for detecting changes to the DOM. Preferably cross-browser, but if there\'s any efficient means which are not cross browser, I can implement these with a fail-safe cross browser method. In particular, I need to detect changes that would affect the text on a page, so any new, removed or modified elements, or changes to inner text (innerHTML) would be required. I don\'t have control over the changes being made (they could be due to 3rd party javascript includes,

How can I be notified when an element is added to the page?

阅读更多关于 How can I be notified when an element is added to the page?

问题 I want a function of my choosing to run when a DOM element is added to the page. This is in the context of a browser extension, so the webpage runs independently of me and I cannot modify its source. What are my options here? I guess that, in theory, I could just use setInterval() to continually search for the element\'s presence and perform my action if the element is there, but I need a better approach. 回答1: Warning! This answer is now outdated. DOM Level 4 introduced MutationObserver,

Detect changes in the DOM

阅读更多关于 Detect changes in the DOM

问题 I want to execute a function when some div or input are added to the html. Is this possible? For example, a text input is added, then the function should be called. 回答1: 2015 update, new MutationObserver is supported by modern browsers: Chrome 18+, Firefox 14+, IE 11+, Safari 6+ If you need to support older ones, you may try to fall back to other approaches like the ones mentioned in this 5 (!) year old answer below. There be dragons. Enjoy :) Someone else is changing the document? Because if

Detect changes in the DOM

阅读更多关于 Detect changes in the DOM