2

私は現在 Javascript を学んでおり、私の章の 1 つは「Mutation Observer」です。新しい div がページに追加されたかどうかを検出してコンソールに表示する単純な関数を作成しようとしています。ただし、このメッセージが表示され、このエラーを修正する方法を見つけるのに苦労しています。誰かが私が間違っていることを説明してくれれば、とても感謝しています。前もって感謝します！

不明な TypeError: 'MutationObserver' で 'observe' を実行できませんでした: パラメータ 1 はタイプ 'Node' ではありません。

これまでのところ、これは私が書いたコードです:

document.getElementById("Button").onclick = function(){
  var Add = document.createElement('div');
    Add.setAttribute("class", "Alpha");
    Add.appendChild(document.createTextNode("Test"));
    document.getElementById('Frame').appendChild(Add);
};

var Divs = document.querySelectorAll("div");
var Observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    for(var i = 0; i <= mutation.addedNodes.length; i++){
      if(!(mutation.addedNodes[i] == null)){
        console.log(mutation.addedNodes[i].innerHTML);
      }
    }
  });
});
Observer.observe(Divs, {childList: true, subtree:true});
.Alpha{
  color:red;
}
<button id="Button">Generate a new div</button>
<div id="Frame"></div>

4

1 に答える 1

3

この問題は、エラー メッセージで説明されています。この関数はNodeobserveを想定していますが、実際にはNodeList (1 つまたは複数の Node)を返す lookupの戻り値を割り当てています。何も見つからない場合でも、空を返し、無効のままです。querySelectorAllNodeList

あなたのインスタンスでは、アイテムを id の DIV にプッシュしているように見えるFrameので、それにアタッチMutationObserverして、その子への変更を監視します。最後に、変更されたノードを配列にプッシュし、内容をコンソール ログに記録して、何がキャプチャされているかを確認できるようにします。

var target = document.getElementById('Frame');
var insertedNodes = [];
var Observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for(var i = 0; i < mutation.addedNodes.length; i++) {
            insertedNodes.push(mutation.addedNodes[i]);
        }
    });
});

Observer.observe(target, {
    childList: true,
    subtree:true
});

console.log(insertedNodes);
于 2017-07-06T09:43:43.167 に答える