浅谈vue中document.getElementById()拿到的是原值的问题


Posted in Javascript onJuly 26, 2020

问题

两个界面都有id="test"的div,内容不同,路由切换的时候document.getElementById()拿到的是原界面的值。

问题代码

// 页面1
<div id="test">aaa</div>
// 页面2
<div id="test">bbb</div>

// 路由切换如下:
<transition name="card-fade">
 <router-view/>
</transition>
.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.在引入语句<script type="text/javascript"> 里面加个defer=true属性

defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。

以上这篇浅谈vue中document.getElementById()拿到的是原值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery.addClass始终无效原因分析
Sep 08 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
关于vue 结合原生js 解决echarts resize问题
Jul 26 #Javascript
Element Tooltip 文字提示的使用示例
Jul 26 #Javascript
Element Popover 弹出框的使用示例
Jul 26 #Javascript
Element Card 卡片的具体使用
Jul 26 #Javascript
Element Carousel 走马灯的具体实现
Jul 26 #Javascript
three.js欧拉角和四元数的使用方法
Jul 26 #Javascript
Element Collapse 折叠面板的使用方法
Jul 26 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
php 浮点数比较方法详解
2017/05/05 PHP
php微信开发之关注事件
2018/06/14 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python实现按行切分文本文件的方法
2016/04/18 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
java判断三位数的实例讲解
2019/06/10 Python
tensorflow如何批量读取图片
2019/08/29 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
2015年学校政教工作总结
2015/07/20 职场文书
三十年同学聚会感言
2015/07/30 职场文书
军事理论课感想
2015/08/11 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
mysql自增长id用完了该怎么办
2022/02/12 MySQL