如何将dom节点添加到文档中？

Question

在将dom节点添加到文档中时，是否有任何好方法可以获得警报？如果你在javascript中将dom节点放在一起，通常你会先将它们放在一起，这样你就不会一直在回流。但这意味着当添加元素时，它们在页面上不可见，这意味着有关它们的某些信息是不可访问/错误的。例如，offsetWidth在添加到文档流之前将为0，无论其添加后的宽度如何。

因此，我希望在将某个节点添加到文档时获取某个事件的某种方式，这样我就可以执行需要offsetWidth的事情以及需要渲染它的其他事情。

Answer 1

使用变异观察者来观察document应该是在大多数情况下使用的合理工具（如果您正在设置一个长时间倾听的监听器，则可能不合理）： / p>

        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if(mutation.target.contains(block.domNode)) {
                    // do your thing, then..
                    observer.disconnect()
                }
            })
        })
        observer2.observe(document, {childList: true, subtree: true})

请注意，如果从文档中删除了dom节点，然后重新插入，则上面的代码将无法捕获（但可以修改为）。