問題

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