追加されたDOMノードのクラス名を取得する（mutationObserver）

Question

Facebookの投稿に特定の単語リストが含まれている場合、自動的に非表示にする簡単なuserscriptを作成しています。コア機能は動作しますが、私のMutationObserverはclassNameのmutation.addedNodesを正しく読まないようです。私はmutation.addedNodesをループし、これらの要素のいずれかがクラスuserContentWrapperを持っているかどうかをチェックしますが、要素にクラスがあってもそのテストの結果は常にfalseです。

オブザーバーは、追加されたノードがすべての属性を含む完全に形成される前に解析していると仮定できます。完全に完了するまでノードを処理するためにオブザーバーを待機させるにはどうすればよいですか？または、私は問題を理解していないのですか？事前に

おかげで...あなたは深く掘る必要がありますので

Answer 1

が追加されたノードのいくつかは、コンテナである：ブロックDOMとJSエンジンという

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コールバックがマイクロタスクとして実行されるので、 が極端にである必要があります。特に、Facebookのような複雑なサイトでは、多くのDOM変異が生成されます。

これは、devtools（F12キー）プロファイラ/タイムラインパネルでテストできます。

あなたがMutationObserverを使用しての悪影響を最小限にしたい場合は、次のイベントに変化の大きなバッチを延期タスク：

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}); 
};