浅谈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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
vue父子组件间引用之$parent、$children
May 20 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
javascript 播放器 控制
2007/01/22 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python