监听一个DOM节点的变化_dom 监听某个节点的变化

监听div宽高变化

开发过程中经常遇到的一个问题就是如何监听一个div的size变化
比如div1宽度变化的时候同步去改div2的宽度
我们一开始会用$(window).resize()去做，但这个方法只能监听浏览器窗口的变化，很多时候，div的size发生了变化，但是window的size并没有改变。
此时就需要用到ResizeObserver
ResizeObserver可以帮助我们监听一个DOM节点的变化，包括

• 节点的显示和隐藏
• 节点的size变化
  ResizeObserver API使用了观察者模式，也就是我们常说的发布-订阅模式

var myObserver = new ResizeObserver(function(entries) {
   entries.forEach(function(entry) {
      // entry.contentRect 监听的dom大小位置信息
      // entry.target 监听的dom对象
    })
})
myObserver.observe(dom); // dom
1
2
3
4
5
6
7

example
在div1宽度改变的时候同步改一下div2的宽度

<div id="div1"></div>
<div id="div2"></div>

var myObserver = new ResizeObserver(function(entries) {
   entries.forEach(function(entry) {
      // entry.contentRect 监听的dom大小位置信息
      // entry.target 监听的dom对象
      document.getElementById('div2').style.width = entry.contentRect.width + "px";
    })
})
myObserver.observe(document.getElementById('div1')); // dom
1
2
3
4
5
6
7
8
9
10
11