JS: detect a dom mutation of a watched div (or change-event-listener to innerHTML)

Question

:)

I'm using the NicEdit WYSIWYG editor. The DIV is patched with a hidden textarea field.

The problem is that all changes are just synced onSubmit().

Now I need a way to listen for changes. For example to change backgound color of the field on changing content (inputs) (flagged as unsaved). But there is no addEventListener for changed InnerHTML, as far as I know. So maybe it's possible to use a callback function like a domMutationObserver. But I have no ideas how to deal with that.

js code:

let domField = document.querySelector('.contents .subpage[data-pagename="Index"][data-culture="en-US"] .nicEdit-main');

I can detect the selector of the editor div. So how to detect changes inside this element/node?

I read something about an "observer" to detect dom mutations. Maybe somebody can give me a simple and easy example.

Thx for everything. ;)

EDIT: And I hope we all agree that I won't set an interval (just to save browser performance). But yeah that could be a way. So watching for mutations or changing innerHTML of my DIV element.

pseudo code:

domElement.innerHTML.watch('change', elem => {
    elem.classList.add('changed'); //or unsaved
});

Does this answer your question? [Detect changes in the DOM](https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom) — Denis P, Jun 27 '23 at 23:19

hhh · Answer 1 · 2020-06-03T07:49:07.873

0

maybe Proxy could solve it.when some properties of style has changed,set will invoke.

    var app = document.getElementById('app')
    var handle = {
      get(target, property, value, receive) {
        return target[property]
      },
      set(target, property, value, receive) {
        // callback()
        Reflect.set(target, property, value)
      }
    }
    var a = new Proxy(app, handle)
    a.innerHTML = 2
    a.style.background = "red"
    a.style.height = "200px"
    a.style.width = "200px"

edited Jun 03 '20 at 07:49

answered Jun 03 '20 at 02:17

hhh

97
6

I'm not sure, what you want to show me here. Okay, this code is changing the background of my DIV box after a 2secs timeout. But it doesn't seem to watch for DOM mutations or an changing innerHTML of my DIV element. And I hope we all agree that I won't set an interval (to save browser performance). – Froschkoenig84 Jun 03 '20 at 04:50
you could set proxy for your element,and set `callback` into `set` – hhh Jun 03 '20 at 07:43
Oohhh, okay. I see. This is interesting. :) But for the moment I'll use the onblur event to check changes (from loaded init). That protects browser performance. – Froschkoenig84 Jun 03 '20 at 09:04

score 0 · Answer 2 · answered Jun 03 '20 at 06:15

After doing some research, I managed to create an Observer.
Unfortunately, this fires with every single DOM change during runtime.

js code:

let domElement = document.querySelector('.contents .subpage[data-pagename="Index"] .culture[data-culture="de-DE"] .nicEdit-main');

let observer = new window.MutationObserver((e) => {
    console.log(domElement.innerHTML);
});

observer.observe(domElement, {
    characterData: true,
    subtree: true
});

In the meantime, I think that watching the blur event would be enough. Then it just should be checked whether the "new" innerHTML differs from the "old" (or initially loaded) innerHTML.

js code:

let domElement = document.querySelector('.contents .subpage[data-pagename="Index"] .culture[data-culture="de-DE"] .nicEdit-main');

domElement.addEventListener('blur', (e) => {
    //check .innerHTML changed (compared to init value)
    alert('onblur');
});

Of course, this isn't a DOM observer / watching, but it costs the browser significantly less performance, if not each separate change fires, but only leave-focus interaction of the user and a manually check for .innerHTML changes.

"Unfortunately, this fires with every single DOM change during runtime." What about only setting the observer after the page has finished loading? — Kalnode, Jan 03 '23 at 23:26

JS: detect a dom mutation of a watched div (or change-event-listener to innerHTML)

2 Answers2