MutationObserver检查div高度(mutation.type)

Question

我希望使用MutationObserver来听div的高度，但是当我将文本添加到我试图观察的元素的innerHTML中时，它并不会触发。

html：

<button onclick="myFunction()">click me</button>
<div id="support"></div>
<div id="info"></div>
<div id="text"></div>

联署材料：

var myFunction = function() {
  var tmp = document.getElementById('text').innerHTML;
  document.getElementById('text').innerHTML = tmp + "herro<br>";
};

if ("MutationObserver" in window) {
  document.getElementById('support').innerHTML = "MutationObserver supported";
  var observer = new MutationObserver(function (mutations) { // <- this isn't firing
    mutations.forEach(function (mutation) {
      var tmp = document.getElementById('info').innerHTML;
      document.getElementById('info').innerHTML = tmp + mutation.type + "<br>";
    });
  });

  var observerConfig = {
    attributes: true,
    childList: true,
    characterData: true
  };
  nodes
  var targetNode = document.getElementById('text');
  observer.observe(targetNode, observerConfig);
}

代码：http://codepen.io/basickarl/pen/xZXWoK?editors=101

我想知道我做错了什么。

Answer 1

控制台显示：Uncaught ReferenceError: nodes is not defined

删除nodes行为我修复了它：http://codepen.io/anon/pen/jWGdqO?editors=101

祝好运!

Answer 2

MutationObserver不适用于自动高度更改--它用于属性/DOM更改/修改。但是ResizeObserver正是针对这个用例而设计的：

new ResizeObserver(function() {
  console.log("height of yourElement changed to:", yourElement.offsetHeight);
}).observe(yourElement);

所有现代浏览器都支持它：https://caniuse.com/resizeobserver