問題

兩個(gè)界面都有id="test"的div，內(nèi)容不同，路由切換的時(shí)候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;
}

現(xiàn)象

從頁面1跳轉(zhuǎn)到頁面2時(shí)，document.getElementById(‘test')，始終拿到的是aaa。

反之從頁面2跳到頁面1時(shí)，document.getElementById(‘test')，始終拿到的是bbb。

思考

見鬼了，document.getElementById()也有緩存嗎？？

于是，我在頁面3上同樣嘗試document.getElementById(‘test')，當(dāng)從頁面1跳到頁面3同樣拿到aaa。

見鬼了，dom不會(huì)被銷毀嗎？

但是如果頁面1跳轉(zhuǎn)另一個(gè)新的頁面4再跳回3，就顯示document.getElementById(‘test')=null了。

也就是說dom沒什么問題確實(shí)存在就能獲取到，不存在就為空。

原因

轉(zhuǎn)頭一看路由跳轉(zhuǎn)的時(shí)候，transition是啥？呀這個(gè)動(dòng)畫導(dǎo)致的?。。?！

因?yàn)槲覂蓚€(gè)界面切換的時(shí)候有動(dòng)畫，所以從頁面1切換頁面2的那一秒getElementById(‘test')確實(shí)存在兩個(gè)，而且拿到的是第一個(gè)。

反思

1、盡量不要出現(xiàn)ID相同的節(jié)點(diǎn)，即便頁面不同，以為不會(huì)同時(shí)出現(xiàn)。

2、控制樣式盡量不要通過#id，而是給節(jié)點(diǎn)附加樣式.class，防止id因?yàn)楦鞣N原因修改而忘了修改對(duì)應(yīng)樣式。

補(bǔ)充知識(shí)：document.getElementById()獲取一直為null

document.getElementById()獲取一直為null的最常見的一個(gè)原因是js文件在head標(biāo)簽里

產(chǎn)生的加載順序問題，導(dǎo)致get不到節(jié)點(diǎn)的信息

解決辦法：

1.可以body標(biāo)簽下引入js文件

2.在引入語句<script type="text/javascript"> 里面加個(gè)defer=true屬性

defer 屬性規(guī)定是否對(duì)腳本執(zhí)行進(jìn)行延遲，直到頁面加載為止。

以上這篇淺談vue中document.getElementById()拿到的是原值的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。