如何在没有使用jQuery的情况下检测DOM元素的变化

Question

假设我有以下HTML代码：

<div id='content'></div>

当此元素的高度发生变化时，我希望能收到警报。我希望MutationObserver类能够帮助实现这一点，但是我遇到了以下问题：

document.querySelector('#content').style.height = '100px'

它按预期触发我的回调，但正常的用户交互不会触发它，例如：http://jsfiddle.net/wq4q9/2/

我的问题是，检查元素高度是否已更改的最佳现代方法是什么？

请不要使用jQuery。

- Shawn

---

通常的解决方法是为可能导致高度更改的事件（例如窗口调整大小、页面中的其他特定操作等）注册事件处理程序，然后在每次发生这些其他操作之后检查该对象的高度。 - jfriend00

旁注：jQuery 在这里也无济于事，除了让获取高度变得非常容易。 :-) - T.J. Crowder

这不是[Chrome bug]（https://dev59.com/e3nZa4cB1Zd3GeqPtrgA）的重复。 Firefox有相同的行为，并且有其他方法可以调整元素大小，而不会触发突变观察器（并且可以说不应该）。 - T.J. Crowder

@T.J.Crowder把它放在那里主要是为了过滤掉带有jQuery插件链接的答案。 - Shawn

呃。 顺便说一下，如果您在fiddle中使用target而不是#content来定位文本区域，则它可以在Firefox中运行（参考拟提的重复问题https://dev59.com/e3nZa4cB1Zd3GeqPtrgA）。 您当前的fiddle有点像比较苹果和橙子，因为您要求我们手动调整文本区域大小，但以编程方式调整#content大小。 如果您以编程方式调整textarea大小，则MutationObserver将不会触发（http://jsfiddle.net/wq4q9/4/）。 - Matt

@Matt，关于Firefox的那个问题确实很有趣。而且你的fiddle可能更好地展示了这个问题。 - Shawn

Answer 1

除了轮询，我认为你没有其他办法。(另一种使观察者不被触发的方法是，如果您更改了应用于该元素的CSS规则，更改其父级的大小并且其大小取决于该规则，添加了一个新的样式表来影响它...)

- T.J. Crowder

---

更改父元素大小不触发突变观察器的示例：http://jsfiddle.net/wq4q9/3/ - T.J. Crowder

谢谢T.J. -- 我最终可能会选择轮询 :) - Shawn

T.J：为什么我们期望更改父元素的高度会触发“MutationObserver”？观察器附加的元素是否仍未被影响？ - Matt

@Matt：如果（如我上面稍微提到的）它的大小取决于其父元素的大小，则是这样的。在我做的那个小测试中，我使用了 height: 100% 来实现这一点。更改父元素的高度会更改目标元素的高度，但不会触发变异观察器回调函数。 - T.J. Crowder

@T.J.Crowder：啊，我明白了...因为#content有height: 100%。当点击按钮时，我应该注意到巨大的蓝色框变得更大，但是我需要别人告诉我:P。 - Matt

Answer 2

你可能需要遵循T.J. Crowders的建议进行轮询，但是你的代码示例由于其他原因而无法工作（似乎）： childList的文档说它用于监视目标节点的子元素的添加和删除。 ^{*这是我唯一一次参考MSDN而不是MDN，因为MDN关于此的文档很烂。}

---

你应该观察的记录是 子树:

将其设置为 true 以监视目标节点的所有后代的更改

---

如果您这样做，那么代码在Firefox中可以正常工作。

var target = document.querySelector('#content');

var observer = new MutationObserver(function(mutations) {
  console.log(mutations);   
});

var config = { attributes: true, childList: true, subtree: true, characterData: true };
observer.observe(target, config);

document.querySelector('button').addEventListener('click',function(){
    target.style.height = '200px';
});

然而，它在Chrome中仍然无法正常工作；可能是因为Chrome bug在这个问题中报告了。

- Matt