html渲染时,dom元素获取不到

当HTML渲染时，DOM元素可能无法获取，这是因为DOM元素可能还没有被创建或者渲染完成。为了解决这个问题，您可以使用JavaScript的window.onload或者jQuery的$(document).ready()函数，这两个函数可以确保DOM元素已经被完全渲染，从而可以获取到DOM元素。此外，您还可以使用JavaScript的setTimeout()函数，让它在DOM元素被渲染完成之后再执行，从而保证DOM元素可以被正确获取。

使用场景，牌匾文字上的公司名要根据字数多少自动变大变小，要先拿到文字内容

html：

<div class="head-h1" ref="company_name" >{{datas.company_name}}</div>

js：当页面刚加载完，通过接口获取{{datas.company_name}}的值，要对里面的值编辑时

this.$refs.company_name  拿不到值

解决办法：

接口响应完，this.$nextTick()方法里面 *** 作DOM，它才能接收到DOM更新的值

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this.$nextTick(_=>{

        。。。。

            this.$refs. company_name

})

先给你看下面两段代码：

<div id="div1">test!</div>

<script>

   console.log(document.getElementById("div1"))  //这个能够获得值

</script> <script>

   console.log(document.getElementById("div1"))  //这个不能获得值！

</script>

<div id="div1">test!</div>

看出原因没有？当js代码是先于html运行时，是获取不到DOM元素的！因为这时候该DOM元素尚未加载到内存，相当于不存在！

要想实现js代码放到任何位置都能获得DOM元素，就要保证代码在页面完全加载完毕后才开始运行，比如：

<script>

   window.onload=function(){  //网页完全加载完毕才会触发这个事件

      console.log(document.getElementById("div1")) //这时候就能获得了

   }

</script>

<div id="div1">test!</div>

---