监听本DOM渲染操作完毕的函数

可以使用 `window.onload` 或 `DOMContentLoaded` 事件来监听 DOM 渲染操作完毕的函数。

`window.onload` 事件会在整个页面（包括图片、脚本文件等）全部加载完毕后触发，适用于需要等待页面所有资源加载完毕后再进行操作的场景。

示例代码如下：

window.onload = function() {
  // 页面所有资源加载完毕后执行的操作
};

`DOMContentLoaded` 事件则会在文档结构加载完毕后触发，不需要等待图片和脚本文件等资源加载完毕，适用于需要尽早操作 DOM 的场景。

示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // DOM 渲染完毕后执行的操作
});

需要注意的是，`DOMContentLoaded` 事件在 IE8 及以下版本不支持，可以考虑使用兼容性更好的库来实现类似的功能，比如 jQuery 的 `$(document).ready()` 方法。

相关问题

vue监听一个DOM是否存在

可以使用Vue的指令v-if来判断DOM是否存在，当v-if的值为true时，DOM才会被渲染出来。可以在mounted钩子函数中使用定时器来监听DOM是否存在，代码如下：

mounted() {
  const timer = setInterval(() => {
    const dom = document.querySelector('#myDom')
    if (dom) {
      clearInterval(timer)
      // do something
    }
  }, 100)
}

其中，'#myDom'是需要监听的DOM的选择器。

vue3监听dom元素宽度变化

在 Vue 3 中，你可以使用 `resize-observer` API 来监听 DOM 元素的宽度变化。

首先，你需要安装 `resize-observer` 的依赖包：

npm install resize-observer

然后，在组件中使用 `onMounted` 钩子函数来初始化 `resize-observer`，并在 `onUnmounted` 钩子函数中清除它：

import { onMounted, onUnmounted } from 'vue'
import ResizeObserver from 'resize-observer'

export default {
  setup() {
    let width = 0

    const observeWidth = (el) => {
      const observer = new ResizeObserver((entries) => {
        width = entries[0].contentRect.width
      })
      observer.observe(el)
    }

    onMounted(() => {
      const el = document.getElementById('your-element-id')
      observeWidth(el)
    })

    onUnmounted(() => {
      const el = document.getElementById('your-element-id')
      const observer = el.__resizeObserver__
      observer.disconnect()
      delete el.__resizeObserver__
    })

    return {
      width,
    }
  },
}

在上面的示例中，我们使用 `ResizeObserver` 来监听元素的宽度变化，并将宽度的值保存到 `width` 变量中。在 `onMounted` 钩子函数中，我们初始化 `ResizeObserver` 并将其添加到元素上。在 `onUnmounted` 钩子函数中，我们清除 `ResizeObserver`。

最后，我们使用 `width` 变量来渲染组件。当元素的宽度发生变化时，`width` 变量也会更新，从而触发组件的重新渲染。