浅谈vue中document.getElementById()拿到的是原值的问题 | 您所在的位置:网站首页 › getelementbyid为null › 浅谈vue中document.getElementById()拿到的是原值的问题 |
问题 两个界面都有id="test"的div,内容不同,路由切换的时候document.getElementById()拿到的是原界面的值。 问题代码 // 页面1 aaa // 页面2 bbb // 路由切换如下: .card-fade-enter-active { animation: bounce-in 2s; }现象 从页面1跳转到页面2时,document.getElementById(‘test'),始终拿到的是aaa。 反之从页面2跳到页面1时,document.getElementById(‘test'),始终拿到的是bbb。 思考 见鬼了,document.getElementById()也有缓存吗?? 于是,我在页面3上同样尝试document.getElementById(‘test'),当从页面1跳到页面3同样拿到aaa。 见鬼了,dom不会被销毁吗? 但是如果页面1跳转另一个新的页面4再跳回3,就显示document.getElementById(‘test')=null了。 也就是说dom没什么问题确实存在就能获取到,不存在就为空。 原因 转头一看路由跳转的时候,transition是啥?呀这个动画导致的啊!!! 因为我两个界面切换的时候有动画,所以从页面1切换页面2的那一秒getElementById(‘test')确实存在两个,而且拿到的是第一个。 反思 1、尽量不要出现ID相同的节点,即便页面不同,以为不会同时出现。 2、控制样式尽量不要通过#id,而是给节点附加样式.class,防止id因为各种原因修改而忘了修改对应样式。 补充知识:document.getElementById()获取一直为null document.getElementById()获取一直为null的最常见的一个原因是js文件在head标签里 产生的加载顺序问题,导致get不到节点的信息 解决办法: 1.可以body标签下引入js文件 2.在引入语句 里面加个defer=true属性 defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。 以上这篇浅谈vue中document.getElementById()拿到的是原值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 您可能感兴趣的文章:解决vuex数据页面刷新后初始化操作vue中keep-alive、activated的探讨和使用详解Vue生命周期activated之返回上一页不重新请求数据操作vue项目使用$router.go(-1)返回时刷新原来的界面操作 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |