浅谈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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
js prototype截取字符串函数
Apr 01 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
关于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
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
jquery $.each()使用探讨
2013/09/23 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
JS作用域链详解
2017/06/26 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python的缺点和劣势分析
2019/11/19 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
营销与策划专业求职信
2014/06/20 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
公司地址变更通知
2015/04/25 职场文书
获奖感言一句话
2015/07/31 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server