How to use MutationObserver in a jqtree?

Question

I have a jqtree and I should send which nodes were changed using AJAX, to do such a thing, I've used a recursive function to read the whole JSON, the problem is, I just want to send which node was affected. the user can only change one item at a time since the tree is drag-and-drop.

Clarifying:

The page is loaded, and the structure is as well (check on firebug):

then, the user selects and drags child1 into node2:

by doing that the new JSON is generated, then, it's separated and classified into vpais (parents) and vfilhos (children)

However, as you can see, it's not necessary to send all parents and children because only one node will be changed (and it will always be, simply because only one item can be dragged at a time).

So here on SO a guy told me about mutationObserver, which, in theory, is amazing, but then I realized, how the F am I going to use it?!?, it's super complex, I've got the theory but using it is a different story, Can you help me?

Thanks to @Mouser

if (typeof(MutationObserver) != "undefined")
{
    //this is new functionality
    //observer is present in firefox/chrome and IE11+
    // select the target node

        // create an observer instance
        observer = new MutationObserver(observeJSONTree);
        // configuration of the observer:
        var config = { attributes: false, childList: true, characterData: false, subtree: true };

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


}

function observerJSONTree(e)
{

            for (eventObject in e)
            {

                switch(e[eventObject].type)
                {
                    case 'characterData' :
                        //when text is changed
                        //for now do nothing

                    break;

                    case 'childList' :
                        //childs added or removed
                        if (e[eventObject].addedNodes.length > 0)
                        {
                            //childs added
                            //do something
                        }
                        if (e[eventObject].removedNodes.length > 0)
                        {
                            //childs removed

                        }
                    break;

                }
            }
}

Thanks for making so far :)

My code:

$(document).ready(function() {

  var data = [{
    label: 'node1',
    id: 1,
    children: [{
      label: 'child1',
      id: 2
    }, {
      label: 'child3',
      id: 3
    }, {
      label: 'child2',
      id: 4
    }, {
      label: 'child2',
      id: 5
    }]
  }, {
    label: 'node2',
    id: 6,
    children: [{
      label: 'child3',
      id: 7
    }]

  }];



  $('#tree1').tree({
    data: data,
    autoOpen: false,
    dragAndDrop: true
  });

  console.log("Original Structure" + $('#tree1').tree('toJson'));

  $('#tree1').bind(
    'tree.move',
    function(event) {
      data = $(this).tree('toJson');
      event.preventDefault();
      event.move_info.do_move();
      console.log("New Structure" + $(this).tree('toJson'));

      data = $(this).tree('toJson');
      var dadSon = [];
      var dad = [],
        son = [];
      var group = "";
      var randomic = "";

      (function printDadSon(data, parent) {
        if (!data) return;
        for (var i = 0; i < (data.length); i++) {
          if (parent && parent != 'undefined') {
            dadSon[i] = ('vpai= ' + parent + "&" + 'vfilho= ' + data[i].id + "&");
            group += dadSon[i];
          }
          printDadSon(data[i].children, data[i].id);
        }
      })(JSON.parse(data));


      var temp = group.length;
      group = group.substring(0, temp - 1);

      console.log(dadSon);

      $.ajax({
        type: 'POST',
        url: 'link',
        dataType: 'json',
        data: group
      });
      console.log("Done");
    }
  );

});

#navdata {
  width: auto;
  height: auto;
  flex: 1;
  padding-bottom: 1px;
}
#navgrid {
  width: 50%;
  height: 200px;
  overflow-x: visible;
  overflow-y: scroll;
  border: solid 1px #79B7E7;
  background-color: white;
}
#header {
  background-color: #79B7E7;
  width: 99.6%;
  text-align: center;
  border: 1px solid white;
  margin: 1px;
}
.jqtree-element {
  background-color: white;
  border: 1px solid white;
  height: 23px;
  color: red;
}
.jqtree-tree .jqtree-title {
  color: black;
}
ul.jqtree-tree {
  margin-top: 0px;
  margin-left: 1px;
}
ul.jqtree-tree,
ul.jqtree-tree ul.jqtree_common {
  list-style: none outside;
  margin-bottom: 0;
  padding: 0;
}
ul.jqtree-tree ul.jqtree_common {
  display: block;
  text-align: left;
  padding-left: 0px;
  margin-left: 20px;
  margin-right: 0;
}
ul.jqtree-tree li.jqtree-closed > ul.jqtree_common {
  display: none;
}
ul.jqtree-tree li.jqtree_common {
  clear: both;
  list-style-type: none;
}
ul.jqtree-tree .jqtree-toggler {
  color: #325D8A;
}
ul.jqtree-tree .jqtree-toggler:hover {
  color: #3966df;
  text-decoration: none;
}
.jqtree-tree .jqtree-title.jqtree-title-folder {
  margin-left: 0;
}
span.jqtree-dragging {
  color: #fff;
  background: #79B7E7;
  opacity: 0.8;
  cursor: pointer;
  padding: 2px 8px;
}
ul.jqtree-tree li.jqtree-selected > .jqtree-element,
ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7));
}

<!DOCTYPE html>
<!-- Programa: JqTree | Envia nova estrutura JSON como v pai e vfilho -->
<!--    Autor: Calne Ricardo de Souza -->
<!--   Data: 06/07/2015 -->
<html>

<head>
 <!--Removed due to copyrights-->
</head>

<body>
  <div id="navgrid">
    <div id="header">Header</div>
    <div id="tree1">
      <ul class="jqtree_common jqtree-tree">
        <li class="jqtree_common jqtree-folder">
          <div class="jqtree-element jqtree_common">
            <a class="jqtree_common jqtree-toggler">â–¼</a>
            <span class="jqtree_common jqtree-title jqtree-title-folder">node1</span>
          </div>
          <ul class="jqtree_common ">
            <li class="jqtree_common">
              <div class="jqtree-element jqtree_common">
                <span class="jqtree-title jqtree_common">child2</span>
              </div>
            </li>
            <li class="jqtree_common">
              <div class="jqtree-element jqtree_common">
                <span class="jqtree-title jqtree_common">child1</span>
              </div>
            </li>
          </ul>
        </li>
        <li class="jqtree_common jqtree-folder">
          <div class="jqtree-element jqtree_common">
            <a class="jqtree_common jqtree-toggler">â–¼</a>
            <span class="jqtree_common jqtree-title jqtree-title-folder">node2</span>
          </div>
          <ul class="jqtree_common ">
            <li class="jqtree_common">
              <div class="jqtree-element jqtree_common">
                <span class="jqtree-title jqtree_common">child3</span>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>