Questions tagged [mutation-observers]
Mutation Observers are part of the DOM4 specification, and allow callbacks to be triggered when elements of the DOM change.
554
questions
319votes
10answers
374kviews
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.
- 15.8k
153votes
8answers
167kviews
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. ...
- 54.5k
97votes
1answer
38kviews
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 ...
- 83.3k
51votes
6answers
58kviews
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 ...
- 5,020
49votes
4answers
53kviews
Can jQuery selectors be used with DOM mutation observers?
HTML5 includes a concept of "mutation observers" to monitor changes to the browser's DOM.
Your observer callback will be passed data which looks a lot like DOM tree snippets. I don't know if they are ...
- 14.6k
42votes
4answers
72kviews
'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 ...
- 492
40votes
1answer
23kviews
Can a single MutationObserver object observe multiple targets?
I would like to use a MutationObserver object to observe changes to some of my DOM nodes.
The docs give an example of creating a MutationObserver object and registering it on a target.
// select ...
- 5,287
39votes
3answers
32kviews
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")....
- 489
32votes
1answer
21kviews
Detecting class change without setInterval
I have a div that has additional classes added to it programmatically. How can I detect the class name change without using this setInterval implementation?
setInterval(function() {
var elem = ...
- 12.5k
30votes
1answer
12kviews
Observe mutations on a target node that doesn't exist yet
Is it possible to observer mutations on a DOM node that doesn't exist yet?
Example:
My app creates a div at some point: <div id="message" data-message-content="foo" data-message-type="bar" />.
...
- 54k
28votes
1answer
9kviews
An event or observer for changes to getBoundingClientRect()
Is there a way to detect when an element's getBoundingClientRect() rectangle has changed without actually calculating getBoundingClientRect()? Something like a "dirty flag"? Naively, I assume that ...
- 735
25votes
4answers
24kviews
Detect input value change with MutationObserver
I want to detect when text/value change in input field. Even if I change the value with js, I want to detect that changes.
Here's what I've tried so far in demo in fiddle.
HTML:
<input type="...
- 696
24votes
1answer
23kviews
MutationObserver not working
Consider the following code:
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(...
- 3,568
21votes
1answer
15kviews
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&...
- 2,776
21votes
2answers
14kviews
MutationObserver class changes
I am using MutationObserver to detect when a specific class has been added to an element.
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
...
- 2,469