JavaScript使用createElement创建一个li，后如何检测到已经插入到真实dom，并计算li的宽度

Question

js通过createElement创建一个li，想要计算这个li的宽度，但是没插入页面之前计算宽度是0，插入页面之后就能计算出li的真实宽度

class Tab{
    constructor(){
        const tab = document.createElement("ul")
        const li = document.createElement("li")
        tab.appendChild(li)
        li.textContent = "test"
        // 1、这个时候如果获取li的宽度(li.offsetWidth)，是0
        // 如何在tab插入真实dom上后再去计算 li.offsetWidth？
        return tab
    }
}

const tab = new Tab()
const root = document.getElementById('root')
root.appendChild(tab)
// 2、这个时候再去计算 li的offsetWidth 就不是0
// li 在render到页面后会不会触发什么事件，通过监听这个事件来获取呢？

Answer 1

因为在插入之前，各种样式属性都没有应用上，浏览器并不知道你里边的内容该以怎样的方式来呈现。
插入到文档中以后，才会被浏览器渲染出来，进而计算出盒模型相关的属性。

Answer 2

从你代码来看， 在构造函数中是获取不到li的宽度的，因为在构造函数中 你只做了把li插入到ul中 而ul并没有插入到DOM中，故 li也就没有插入到DOM中 所以你获取不到，考虑换个思路 实现你的需求。

Answer 3

看起来你需要 MutationObserver，它能够侦听 DOM 结构的变化，调用函数处理。

Answer 4

有个监听事件 貌似叫 DOMNodeInserted 可以挂在 li 上面，然后呢，在插入的时候，就可以获取到了