淺談vue中document.getElementById()拿到的是原值的問(wèn)題
問(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ì)被銷(xiāo)毀嗎？
但是如果頁(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)畫(huà)導(dǎo)致的?。。。?/p>
因?yàn)槲覂蓚€(gè)界面切換的時(shí)候有動(dòng)畫(huà)，所以從頁(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包
這篇文章主要介紹了詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要給大家介紹了關(guān)于如何使用寶塔部署Vue項(xiàng)目的相關(guān)資料,寶塔面板提供了非常方便的方式來(lái)部署 Vue 項(xiàng)目,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景
這篇文章主要介紹了vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁(yè)切換
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁(yè)的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue3中watch和watchEffect實(shí)戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實(shí)戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽(tīng)器，但是在寫(xiě)法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了Vue如何將時(shí)間戳轉(zhuǎn)換日期格式,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn)
el-tab本身的功能是點(diǎn)擊之后切換不同頁(yè),本文主要介紹了vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
淺談element關(guān)于table拖拽排序問(wèn)題
本文主要介紹了element關(guān)于table拖拽排序問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11