js 如何判断一个 dom 节点是否挂载完成?

Question

我现在的代码判断

dom.offsetWidth && dom.offsetHeight

但是可能存在某个节点 宽高都为 0的情况,这样就出现 bug 了...

请问大佬有没有什么 API 能判断?

Answer 1

相同的原理，是不是可以把获取高度换成获取一些可继承属性，比如font、color等

var a = document.createElement('span')
document.body.appendChild(a)
window.getComputedStyle(a).font

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

看你需要在什么框架里面判断或者在原生js中判断，
如果在React或者Vue中判断只需要在mounte对应生命周期里面去获取就可以了；
如果是原生js可以监听DomContentLoaded事件，在事件内部去操作
已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

我不是很明白什么场景下会需要这样判断。 正常情况下是如果能获取到，那么就已经挂载呢。

vue 中可以在 nextTick 之后，这是因为你内部有可能会操作，比如说 v-if，需要在任务最后才能拿到 dom。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

你可以看下这个MutationObserverAPI，这个API可以观察DOM树的变动。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 5

给这个dom加一个很微妙的动画， 比如透明度变化

.show{
    animation: ani .1s;
}
@keyframes ani{
    to {
        opacity: .99
    }
}

因为动画会在节点挂载后自动执行，所以监听动画完成事件就行了

document.addEventListener('animationend',function(){
    //有动画完成
})