title: Create Listener For Dom Changes in Qml WebEngineView (Mutation Observer)
body: <p>i have a html page containing this :</p>
  
  <pre><code>&lt;div id="ajaxloader" style="display: none;"&gt;
          &lt;div&gt;
            hello world
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i can read its display value with <code>document.getElementById('ajaxloader').style.display</code><br>
  i want to get notified whenever its display changed to <code>block</code> or <code>none</code>.<br>
  currently i am using a dumb solution using timer :</p>
  
  <pre><code>Timer{
          running : true
          repeat : true
          interval: 500
          onTriggered: {
              var js = "document.getElementById('ajaxloader').style.display"
              webView.runJavaScript(js,x=&gt;{
                    if(x=="block"){
                         // we catch the change but its really bad solution                   
                    }
              })
          }
      }  
  </code></pre>
  
  <p>i am looking for a way to catch this kind of changes in DOM , there is something called <code>Mutation Observer</code> but i am not sure how to implement it into QML's WebEngineView.<br>
  all i need is a way to catch changes happend in the WebEngineView, or an event to catch CRUD's going on in the engine or anyway better than this timer!<br>
  <strong>UPDATE</strong> :<br>
  for example  we have a webengine which goes to google.com and after load finished it changes search text to 'hello world' we want to catch that change without using timer , in real websites this changes actually happens with CRUD functions (ajax requests) or other ways:</p>
  
  <pre><code>WebChannel{
      id:_channel
  }
  WebEngineView{
      id:webEngine
      height: parent.height
      width: parent.width
      webChannel: _channel
      url : "www.google.com"
      onNewViewRequested: {
          request.openIn(webEngine)
      }
      objectName: "webView"
      profile.httpCacheType: WebEngineProfile.NoCache
  
      onLoadingChanged: {
          if(loadRequest.status == WebEngineView.LoadSucceededStatus){
              var js = "document.querySelector('input[role=combobox]').value = 'hello world'"
              webEngine.runJavaScript(js,y=&gt;{})
          }
      }
  
  }  
  </code></pre>
  
  <p>dont forget to initialize engine in c++ it wont work without this : <code>QtWebEngine::initialize();</code> and other importing stuff plus you need to add this to pro file
  <code>QT += webengine webengine-private webenginecore webenginecore-private</code><br>
  now if i use timer method which i want to put it aside it should be like this:</p>
  
  <pre><code>Timer{
      running : true
      repeat : true
      interval : 500
      onTriggered:{
           var js = "document.querySelector('input[role=combobox]').value"
           webEngine.runJavaScript(js,y=&gt;{console.log(y)});
           // now i have to check y to see if its equals to hello world or what ever which is really bad idea to use a timer here
      }
  }  
  </code></pre>
  
  <p>for example you can observe changes in input of google like this :</p>
  
  <pre><code>var targetNode = document.querySelector('input[role=combobox]')
  targetNode.oninput = function(e){this.setAttribute('value',targetNode.value)}
  var config = { attributes: true, childList: true, subtree: true };
  var callback = function(mutationsList, observer) {
      for(var mutation of mutationsList) {
          if (mutation.type == 'childList') {
              console.log('A child node has been added or removed.');
          }
          else if (mutation.type == 'attributes') {
              console.log('The ' + mutation.attributeName + ' attribute was modified.');
          }
      }
  };
  
  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(callback);
  
  // Start observing the target node for configured mutations
  observer.observe(targetNode, config); 
  </code></pre>