Abrufen des className des hinzugefügten DOM-Knotens (mutationObserver)

Question

Ich schreibe ein einfaches Benutzerskript, das einen Facebook-Post automatisch versteckt, wenn er eine bestimmte Liste von Wörtern enthält. Die Kernfunktionalität funktioniert, aber meine MutationObserver scheint die className von mutation.addedNodes nicht richtig zu lesen. Ich Schleife durch mutation.addedNodes und überprüfen, ob eines dieser Elemente die Klasse userContentWrapper haben, aber das Ergebnis dieses Tests ist immer falsch - auch wenn das Element die Klasse hat.

Ich kann nur annehmen, dass der Beobachter den hinzugefügten Knoten analysiert, bevor er vollständig mit allen vorhandenen Attributen gebildet ist. Wie kann ich den Beobachter warten lassen, bis er den Knoten vollständig bearbeitet hat? Oder verstehe ich das Problem nicht?

Vielen Dank im Voraus ...

Answer 1

Einige der zusätzlichen Knoten Container sind, so dass man tiefer graben sollten:

var startObserver = function() { 
    var observer = new MutationObserver(function(mutations) { 
     for (var m=0; m < mutations.length; m++) { 
      var added = mutations[m].addedNodes; 
      for (var i = 0; i < added.length; i++) { 
       var node = added[i]; 
       if (node.nodeType != 1) { // not Node.ELEMENT_NODE 
        continue; 
       } 
       if (/\buserContentWrapper\b/.test(node.className)) { 
        processFilter(node); 
       } else if (node.children.length) { 
        var nodes = node.getElementsByTagName('userContentWrapper'); 
        for (var j = 0; j < nodes.length; j++) { 
         processFilter(nodes[j]); 
        } 
       } 
      } 
     }); 
    }); 
    observer.observe(document, {childList: true, subtree: true}); 
}; 

MutationObserver Rückruf als Mikrotaskanalysierer blockiert DOM und JS-Engine ausgeführt wird, so Es sollte extrem schnell sein, vor allem auf einer komplexen Website wie Facebook, die viele DOM-Mutationen generiert.

Dies kann in Devtools (F12 Schlüssel) Profiler/Timeline Panels getestet werden.

Wenn Sie Nebenwirkungen bei der Verwendung eines MutationObserver minimieren wollen, verschieben große Chargen von Änderungen in Aufgabe nächste Veranstaltung:

var startObserver = function() { 
    var observer = new MutationObserver(function handler(mutations, postponed) { 
     if (mutations.length > 100 && !postponed) { 
      setTimeout(function() { handler(mutations, true) }, 0); 
      return; 
     } 
     for (var m=0; m < mutations.length; m++) { 
      var added = mutations[m].addedNodes; 
      for (var i = 0; i < added.length; i++) { 
       var node = added[i]; 
       if (node.nodeType != 1) { // not Node.ELEMENT_NODE 
        continue; 
       } 
       if (/\buserContentWrapper\b/.test(node.className)) { 
        processFilter(node); 
       } else if (node.children.length) { 
        var nodes = node.getElementsByTagName('userContentWrapper'); 
        for (var j = 0; j < nodes.length; j++) { 
         processFilter(nodes[j]); 
        } 
       } 
      } 
     }); 
    }); 
    observer.observe(document, {childList: true, subtree: true}); 
};