問(wèn)題

兩個(gè)界面都有id='test'的div，內(nèi)容不同，路由切換的時(shí)候document.getElementById()拿到的是原界面的值。

問(wèn)題代碼

// 頁(yè)面1<div id='test'>aaa</div>// 頁(yè)面2<div id='test'>bbb</div>// 路由切換如下：<transition name='card-fade'> <router-view/></transition>.card-fade-enter-active { animation: bounce-in 2s;}

現(xiàn)象

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

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

思考

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

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

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

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

也就是說(shuō)dom沒(méi)什么問(wèn)題確實(shí)存在就能獲取到，不存在就為空。

原因

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

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

反思

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

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

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

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

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

解決辦法：

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

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

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

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