web-dev-qa-db-fra.com

Un seul objet MutationObserver peut-il observer plusieurs cibles?

Je voudrais utiliser un objet MutationObserver pour observer les modifications de certains de mes nœuds DOM.

Les documents donnent un exemple de création d'un objet MutationObserver et de son enregistrement sur une cible.

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

Disons que j'ai le code ci-dessus, mais juste en dessous, je place ce code:

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

observer:

  • maintenant observer 2 cibles?
  • arrêtera-t-il d'observer target?
  • décidera-t-il de ne pas observer target2?
  • cela déclenchera-t-il une erreur?
  • ou présentera-t-il un autre comportement?
javascripthtmldommutation-observers
30
Luke

L'observateur va maintenant regarder deux cibles - target et target2 selon vos définitions. Aucune erreur ne sera levée et target ne sera pas "non enregistré" en faveur de target2. Aucun comportement inattendu ou autre ne sera exposé.

Voici un exemple qui utilise le même MutationObserver sur deux éléments modifiables. Pour afficher cela, supprimez le <span> nœud de chaque élément contenteditable et affichez l'étendue du comportement sur les deux éléments observés.

<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 - démo

Notez que j'ai recyclé la même configuration pour cette première démo, mais le placement d'une nouvelle configuration sera exclusif à cet élément observé. En prenant votre exemple tel que défini dans config2, si utilisé sur #myTextArea2, vous ne verrez pas le nœud enregistré selon les options de configuration, mais notez que l'observateur de #myTextArea n'est pas affecté.

JSFiddle Link - démo - exclusivité de configuration

26
scniro