vue document.getElementById值为空的原因及解决方法

最新推荐文章于 2024-05-23 20:55:08 发布
最新推荐文章于 2024-05-23 20:55:08 发布
阅读量3.7k 收藏 2
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ttowx/article/details/130766576
版权
文章探讨了由于父元素使用v-if和JavaScript代码在DOM渲染前执行导致的问题，并提出了两种解决方案：一是使用script标签的defer属性延迟脚本执行，二是利用Vue的this.$nextTick确保在数据更新后操作DOM。
摘要由CSDN通过智能技术生成

1.原因：
①父元素v-if
②js代码在head前，即dom元素渲染前
2.解决方法
①script标签上加defer=true的属性
②在vue中，利用this.$nextTick(()=>{
let div=document.getElementById(id)
//获取到的是数据更新后的Dom数据
}
)

橘子柿子Coox
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeError document.getElementById(…) is null错误原因
12-09
今天手写了一个简单的页面做测试用，写完js部分总是报 TypeError document.getElementById(…) is null 这个错误，代码看了几遍，语法上没找着什么错误，没办法，就在互联网上搜索了一下，才发现 document.getElementById 这个根据id找节点的语法写法还是有点讲究的，具体如下： （1）如果写在 id 所在节点的前面，比如 head 块中，则要如下写法： 代码如下: [removed]=function(){  ……js代码 } 以上代码的意思是在html元素加载完后再运行js （2）写在 id 所在节点的后面，不然就会报 Type
document.getElementById为空或不是对象的解决方法
10-29
document.getElementById为空或不是对象的解决方法，一般情况下注意先内容后js.
vue3 中document.getElementById(‘container‘).scrollWidth = 0 的简单解决方法nextTick
最新发布
jwbabc的专栏
05-23 441
document.getElementById('container').scrollWidth获取的值是0的处理
【js】vue获取document.getElementById(a)为null
每天进步一点点, 靠近小目标一点点~
11-02 1481
在菜单A页面点击某个元素携带id跳转到B详情页面，B页面获取该id元素的offsetTop, 并自动滚动到该元素处
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
document.getElementById获取控件对象为空的解决方法
09-04
今天写个网页，想在页面加载onLoad时，动态显示由后台其他程序传来的数据时，用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。看下文的示例和解决方法
vue中document.getElementById 怎么写都为空
雪糕的博客
09-15 987
vue中document.getElementById 怎么写都为空 首先核查基础的id是否写的完全一致 方法如果是位于**created()中元素挂载不稳定，会出现为空的情况(修改到mounted()**方法中即可) script标签上加defer=true的属性 此方法我尝试了并不好使 确保你的代码在页面加载完毕后再执行，若JavaScript代码在页面加载完成之前执行，那么getElementById()方法将无法找到对应的元素。
vue中使用document.getelementbyid为null
曾大强博客
02-08 2314
在检查过id的拼写正确的情况下，而且在初始化数据是在mounted之后执行的，检查过代码，发现正文部分挂载发生错误，这时会出现找不到的情况。
Vue中使用getElementById结果返回元素为null ？
云间月
03-31 2万+
【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？ 文章目录【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？在created()中使用getElementByIdmounted()中使用getElementByIdcreated()中结合this.$nextTick()实现业务需求总结 首先，我在项目中用这样一个需求，...
关于document.getElementById(“id“)在vue中null的情况
H_Z_B的博客
11-06 4105
在created()中使用getElementById 这个时候元素挂载不稳定，所有会找不到（出现null的情况） mounted()中使用getElementById 这个时候就挂载好了使用时就不会出现 总结：查找元素时需要等元素挂载好，这样才不会出现null的情况。 ...
浅谈vue中document.getElementById()拿到的是原值的问题
12-28
问题 两个界面都有id=”test”的div，内容不同，路由切换的时候document.getElementById()拿到的是原界面的值。 问题代码 // 页面1 <div id=test>aaa</div> // 页面2 <div id=test>bbb</div> // 路由切换如下： <transition name=card-fade> <router> </transition> .card-fade-enter-active { animation: bounce-in 2s; } 现象 从页面1跳转到页面2时，document.getElemen
TypeError document.getElementById(...) is null错误原因
09-03
这个错误表示`document.getElementById`方法未能找到匹配给定ID的元素，因此返回`null`，而当你尝试调用`null`上的任何属性或方法时，JavaScript会抛出此类型错误。 ### 错误原因 1. **元素未加载**：在使用`...
document.getElementById()获取一直为null
慕白Lee的博客
10-20 9985
document.getElementById()获取一直为null的最常见的一个原因是js文件在head标签里。直接使用$("#duang")同样可以获得对象进行一系列操作, 但是同样需要注意ID的正确性。产生的加载顺序问题，导致get不到节点的信息.
Vue中在setup里使用getElementById为null
m0_63666855的博客
03-04 507
分析：在setup中，这个时候Vue尚未完成挂载，也就不能通过getElementById获取Dom元素，所以控制台打印为null，应该将代码迁移到onMounted中。在setup中获取dom,打印出来结果为null。
出现document.getElementById为空或不是对象的原因及解决方法
weixin_43079157的博客
11-13 5618
今天写一个JS代码，发现老出现“document.getElementById为空或不是对象”，经过多番求解，终于解决此问题，现将经验与源码爱好者网友分享。其实出现这种错误一般情况下不是JavaScript本身代码的问题，很多情况下，是由于你的疏忽而没有定义ID所致，检查的顺序应该是先内容后js。 1.出现 'null’为空或不是对象的情况： 2.出现document.getElementById...
Java调用Document.getElementById方法返回null的解决办法
weixin_30535565的博客
02-06 487
Java中操作xml的函数Document.getElementById(String id)，是通过指定的id来获取对应的element。但是仅仅定义了正确的schema和对应的xml文件是不够的，返回值仍然是null。因为我们不仅要告诉xml文件我们所用的schema是哪个，还需要告诉Java的parser使用哪个schema来验证，否则parser就没法通过schema来验证xml文件内...
JavaScript脚本中 getElementById 返回值总是为空
weixin_34357436的博客
11-25 420
　　　　出现该问题的主要问题是由于JavaScript脚本中调用的标签位置位于脚本位置之后，我理解的JavaScript调用了尚未加载的标签，故而出错。因此解决办法也好办，就是讲JavaScript代码写在body标签的最后即可，通过实验也验证了。 　　　　网上也有所在java脚本中添加defer属性的方法，具体为: <script defer="defer> ……//具体的...
vue document.getElementById为null
08-25
你在使用Vue时，可能会遇到document.getElementById返回null的问题。这通常是因为Vue是一个基于虚拟DOM的框架，它不直接操作DOM元素，而是通过数据驱动视图的更新。 如果你正在尝试使用document.getElementById获取Vue组件中的元素，可能会出现找不到元素的情况。这是因为Vue组件的渲染是异步的，在你尝试获取元素时，可能组件尚未完全渲染。 解决这个问题的方法是使用Vue提供的ref属性。通过给元素添加ref属性，你可以在Vue组件中引用该元素。例如： ```html <template> <div ref="myElement">Hello Vue!</div> </template> ``` 然后，在Vue组件的方法中，你可以使用this.$refs来访问该元素。例如： ```javascript export default { mounted() { const element = this.$refs.myElement; console.log(element); } } ``` 这样，你就可以在组件完全渲染之后，通过this.$refs来获取元素，并且不会遇到document.getElementById返回null的问题。 希望这个解答能够帮助到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值