MutationObserver is not triggered when innerText changes

Question

I am running a JavaScript file on this URL. I am interested in changes in the red outlined elements:

I wrote the following script

const $xpath = xp => {
  const snapshot = document.evaluate(
    xp, document, null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null
  );
  return [...Array(snapshot.snapshotLength)]
    .map((_, i) => snapshot.snapshotItem(i));
};

const xpathOdds = './/div[@col-id="bestOdds"]/descendant::div[@class="d-flex justify-content-between align-items-center"]';
var odds = $xpath(xpathOdds);
var config = {characterData: true,
              attributes: true,
              childList: true,
              subtree: true
};

odds.forEach(function(target, idx) {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });
  });
  observer.observe(target, config);
})

I am not sure why the MutationObserver is not triggered. It is triggered if I edit an element using right mouse click - "Inspect". However, it is not triggered if the website itself makes changes to the elements in question. When an element changes it becomes yellow, so I know there should have been mutations. What am I doing wrong?

Isn't that because you're listening for changes on a snapshot, which doesn't change irrespective of what is happening on the actual URL? — Aahan Agarwal, Feb 09 '23 at 19:01
No, I actually visit the url using `Selenium` and run the script with `driver.execute_script()` — HJA24, Feb 09 '23 at 19:11
No no, my point was, after you've taken the screenshot it no longer gets updated right? So basically the innerhtml of the snapshot never changes — Aahan Agarwal, Feb 09 '23 at 20:29
It does changes. The elements become and stay yellow for a while after a change in them. — HJA24, Feb 09 '23 at 20:31
After being unable to reliably get mutations observed even on a very simple example in Google Chrome, I suspect there could be bugs in the implementation, see for example [here](https://bugs.chromium.org/p/chromium/issues/detail?id=1343214&q=MutationObserver&can=2). — Heiko Theißen, Feb 12 '23 at 11:03
The site doesn't render all rows at once. Only the rows inside the current viewport. Therefor (depending on the window/viewport size) you won't get any results at all. - Try [changing the window size to the document height](https://stackoverflow.com/a/37183295/10304804) and start the monitoring afterwards. — Christopher, Feb 12 '23 at 16:00

score 3 · Accepted Answer · answered Feb 12 '23 at 19:37

3

I checked the link you posted, and I think the problem is you are attaching the observers to the wrong objects. The thing is, when there is an update and the color of the cell becomes yellow, the whole table get replaced and not just the cells. So the cells you were observing are no longer there to be observed. You should attach the observer to a higher element in the hierarchy that does not get replaced, like that one with the class ag-center-cols-viewport or the document itself.

answered Feb 12 '23 at 19:37

scatolone

733
1
5
21

Okay I will try that. So; get childlist-mutation caused by viewport as target. Loop over `odds` and check which one is yellow (or not white / the default color). Do you know which `odd.style`-attribute I need to check? All of the attributes with color in the name have "" as value? – HJA24 Feb 13 '23 at 08:36
There is a span down in the hierarchy of the cell with the background-color. You could check those different from white. – scatolone Feb 13 '23 at 18:08

score 0 · Answer 2 · answered Feb 09 '23 at 20:42

0

It probably has to do with the config for mutation observer.

var config = {
  attributes: true,
  childList: true,
  subtree: true, // Because you're watching for changes made to one of the children element.
  characterData: true  // The changes you're looking for are in the content and not at element level.
});

answered Feb 09 '23 at 20:42

Aahan Agarwal

391
2
6

Thank you for the suggestion. I tried this, but the `MutationObserver` is not triggered – HJA24 Feb 09 '23 at 20:46

score 0 · Answer 3 · answered Feb 14 '23 at 12:35

The changes you expect triggering the observer are related to the element's style. You have to set the the observer to monitor changes to the element's attributes, including all its style attributes. attributeFilter: ['style']

var config = {
  attributes: true,
  attributeFilter: ['style'],
  childList: true,
  subtree: true
};

score -1 · Answer 4 · edited Apr 25 '23 at 20:22

-1

Maybe its caused because site rendered using Next.js and Virtulal DOM. And mutationObserver doesnt react with changes on virtual dom. And to check changes that make the site itself you can use some other way. For example with setInterval.

Something like this problem I viewed recently here MutationObserver doesn't react to changes to text input fields

edited Apr 25 '23 at 20:22

General Grievance

4,555
31
31
45

answered Feb 14 '23 at 13:05

rycha

679
2
9

MutationObserver is not triggered when innerText changes

4 Answers4