av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術文章
文章詳情頁

淺談vue中document.getElementById()拿到的是原值的問題

瀏覽:3日期:2022-12-28 11:45:08

問題

兩個界面都有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()拿到的是原值的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 不卡在线视频 | 欧美性另类 | 国产九九九九 | 99热在这里只有精品 | 日韩视频国产 | 久久精品电影 | 久久精品欧美一区二区三区不卡 | 蜜桃av人人夜夜澡人人爽 | 91资源在线| 久久久久久久久久久蜜桃 | 日韩中文字幕一区 | 99视频入口 | 日韩精品视频中文字幕 | 国产日韩精品一区 | 99精品国产一区二区三区 | 日韩视频国产 | 天堂综合 | 国产99久久精品一区二区永久免费 | 黄色毛片大全 | 欧美日韩在线一区二区三区 | 一区二区三区影院 | 日韩精品视频一区二区三区 | 成人在线视频一区二区三区 | 欧美精品一二区 | 韩国理论电影在线 | 亚洲精品v日韩精品 | 99久久国产综合精品麻豆 | 欧美一级在线视频 | 欧美人妖网站 | 色www精品视频在线观看 | 成人特级毛片 | 欧洲免费视频 | 国产精品久久久久久久久久久久冷 | www免费视频| 日批免费观看 | 欧美国产视频 | 亚洲一区二区三区免费在线观看 | 久久一热 | 久久se精品一区精品二区 | 久久精品国产免费 | 欧美成人免费在线 |