淺談vue中document.getElementById()拿到的是原值的問題
問題
兩個界面都有id="test"的div，內(nèi)容不同，路由切換的時候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時，document.getElementById(‘test')，始終拿到的是aaa。
反之從頁面2跳到頁面1時，document.getElementById(‘test')，始終拿到的是bbb。
思考
見鬼了，document.getElementById()也有緩存嗎？？
于是，我在頁面3上同樣嘗試document.getElementById(‘test')，當(dāng)從頁面1跳到頁面3同樣拿到aaa。
見鬼了，dom不會被銷毀嗎？
但是如果頁面1跳轉(zhuǎn)另一個新的頁面4再跳回3，就顯示document.getElementById(‘test')=null了。
也就是說dom沒什么問題確實存在就能獲取到，不存在就為空。
原因
轉(zhuǎn)頭一看路由跳轉(zhuǎn)的時候，transition是啥？呀這個動畫導(dǎo)致的?。。?！
因為我兩個界面切換的時候有動畫，所以從頁面1切換頁面2的那一秒getElementById(‘test')確實存在兩個，而且拿到的是第一個。
反思
1、盡量不要出現(xiàn)ID相同的節(jié)點，即便頁面不同，以為不會同時出現(xiàn)。
2、控制樣式盡量不要通過#id，而是給節(jié)點附加樣式.class，防止id因為各種原因修改而忘了修改對應(yīng)樣式。
補充知識：document.getElementById()獲取一直為null
document.getElementById()獲取一直為null的最常見的一個原因是js文件在head標(biāo)簽里
產(chǎn)生的加載順序問題，導(dǎo)致get不到節(jié)點的信息
解決辦法：
1.可以body標(biāo)簽下引入js文件
2.在引入語句<script type="text/javascript"> 里面加個defer=true屬性
defer 屬性規(guī)定是否對腳本執(zhí)行進行延遲，直到頁面加載為止。
以上這篇淺談vue中document.getElementById()拿到的是原值的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包
這篇文章主要介紹了詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要給大家介紹了關(guān)于如何使用寶塔部署Vue項目的相關(guān)資料,寶塔面板提供了非常方便的方式來部署 Vue 項目,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue動態(tài)組件之:is在組件中的使用場景,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue實現(xiàn)點擊按鈕進行上下頁的切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue3中watch和watchEffect實戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了Vue如何將時間戳轉(zhuǎn)換日期格式,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue基于el-breadcrumb實現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實現(xiàn)面包屑功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
vue中el-tab如何點擊不同標(biāo)簽觸發(fā)不同函數(shù)的實現(xiàn)
el-tab本身的功能是點擊之后切換不同頁,本文主要介紹了vue中el-tab如何點擊不同標(biāo)簽觸發(fā)不同函數(shù)的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-03-03
本文主要介紹了element關(guān)于table拖拽排序問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue input標(biāo)簽通用指令校驗的實現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11