DOM元素动态监控

今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕

大体是这样的，默认动态加载的card应该是自动向下，当card遇到页面最下面应该自动向上渲染。

动态生成的DOM都是根据id来监听获取元素的信息。

坑1：当时数据较少没有考虑到card渲染方向，所以在页面下面的时候card加载到了浏览器之外

进坑1：当我一开始碰到这个bug时，so easy！！！所以加了一个判断条件，在函数@mouseenter获取触发点位置，然后加上一个页面高度和页面高度screen.height进行对比，然后对card进行移位，蒽，easy！！！

let rect = this.$el.getBoundingClientRect()

so,坑：很快，师傅过来啦，你这个写死啦，扩展性不好！内心毫无波澜，好，改成动态！

坑2：动态嘛，嗯嗯，就是换成动态判断条件就行啦！

进坑2：Google一下，百度一天，怎么检查新生成的DOM元素是否超出可视页面！结果搜到一堆判断scroll滚动元素的边境溢出！根本没有智能的自动检查函数，我平时也看到过有的网站是可以实现自动判断，所以一定可以解决！证明只有程序袁才是万能的，代码，呵！

so,坑：表示师傅看不下去啦，“你根据ID，利用$nextTick获得更新后的元素信息来获取DOM的信息！”

坑3：调研一下 $nextTick()函数，DOM更新后返回$ nextTick()里的操作，蒽。

坑4：立马开始获取动态弹出card的id，嗯嗯嗯嗯，找到了，通过控制台找到的，由于我用的是一个组件没有使用ref来注释，

出坑4:so，小case【找了两个小时，自闭】，通过this.$rootDOM树来查到元素id，这样找到的id每次都是动态的啦！

进坑3：问题很快来了，我通过id获取到元素的高度啦，但是每次顺序不对啊，每次dom渲染后在找到更新dom的信息。。。又仔细看了一下this.$nextTick(),en,DOM更新后，函数返回操作！！！换个思路，于是通过监控DOM树的变化来在第一时间来获取到dom变化的id并且获取DOM信息

let dom=document.getElementById(this.$root.$children.***.id)
dom.addEventListener('DOMNodeInserted', function(){
   let height=dom.getBoundingClientRect().height    
}, false)

唉，结果和 $nextTick一毛一样，扎心啦，而且在这个监听函数里面使用函数之后，会一直获取到dom更新的信息，卡崩啦！

233,强行出来:嗯嗯，天要亡我！！静想，如果要实现避免动态的card页面生成到可视页面外，大概两种途径，第一种动态的判断位置条件，另一种是通过更加生成位置再次调整！行吧，又回到坑3啦，显示给位置一个默认值，然后根据$nextTick()获取到的dom信息，然后根据鼠标位置，dom高度，可视化窗口高度document.body.clientHeight【上面的那个获取到的是电脑的信息】来判断，调整！！！！

/苦笑/苦笑，有更好的方法，求告知！！！