Detectando mudanças no DOM de maneira eficaz

Observar mudanças no DOM é crucial para criar aplicativos da web dinâmicos que respondam às interações do usuário. Uma abordagem amplamente utilizada envolve o aproveitamento do MutationObserver, uma API moderna que permite observar modificações no DOM. Essa abordagem é suportada pela maioria dos navegadores modernos, incluindo IE11, Firefox e WebKit.

Para implementar isso, você pode usar as seguintes etapas:

var observeDOM = (function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function(obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    } else if (window.addEventListener) { // browser support fallback
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

Esta função recebe um elemento (obj) e uma função de retorno de chamada (retorno de chamada) como argumentos. O retorno de chamada será executado sempre que uma alteração for feita no elemento ou em seus filhos.

Para demonstrar o uso, considere este exemplo:

  
list item (click to delete)

Este exemplo demonstra o seguinte:

• Adicionando um item à lista
• Removendo um item da lista
• Usando MutationObserver para detectar alterações na lista. Isso pode ser usado para realizar diversas ações, como modificar a IU ou atualizar dados de back-end.