web-dev-qa-db-ja.com

1つのMutationObserverオブジェクトで複数のターゲットを監視できますか？

MutationObserver オブジェクトを使用して、DOMノードの一部の変更を監視したいと思います。

ドキュメントでは、MutationObserverオブジェクトを作成してターゲットに登録する例を示しています。

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

上記のコードがありますが、そのすぐ下にこのコードを配置します。

var target2 = document.querySelector('#some-other-id');
var config2 = {attributes: true, subtree: true};
observer.observe(target2, config2);

ウィルobserver：

  • 2つのターゲットを監視していますか？
  • targetの監視を停止しますか？
  • target2を遵守しないことを決定しますか？
  • エラーが発生しますか？
  • または、他の動作を示しますか？
javascripthtmldommutation-observers
27
Luke

オブザーバーは、定義ごとにtargetとtarget2の2つのターゲットを監視します。エラーはスローされず、targetはtarget2を優先して「登録解除」されません。予期しない動作や他の動作は発生しません。

2つのcontenteditable要素で同じMutationObserverを使用するサンプルを次に示します。これを表示するには、各contenteditable要素から<span>ノードを削除し、観察された両方の要素にわたる動作スパンを表示します。

<div id="myTextArea" contenteditable="true">
    <span contenteditable="false">Span A</span>
</div>

<div id="myTextArea2" contenteditable="true">
    <span contenteditable="false">Span B</span>
</div>

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      //console.log($(mutation.removedNodes)); // <<-- includes text nodes

      $(mutation.removedNodes).each(function(value, index) {
          if(this.nodeType === 1) {
              console.log(this)
          }
      });
  });
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe($('#myTextArea')[0], config);

observer.observe($('#myTextArea2')[0], config);

JSFiddle Link -デモ

この最初のデモでは同じ構成をリサイクルしていることに注意してください。ただし、新しい構成を配置することは、観察された要素に限定されます。 config2で定義されている例を使用すると、#myTextArea2で使用される場合、構成オプションごとにログに記録されたノードは表示されませんが、#myTextAreaのオブザーバーは影響を受けません。

JSFiddle Link -デモ-構成の排他性

26
scniro