問題

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