外貿(mào)購物網(wǎng)站短視頻如何引流與推廣
今天在用原生js寫demo的時候發(fā)現(xiàn)一個有意思的小現(xiàn)象，那就是可以直接根據(jù)元素的id去獲取對應的元素。
起先是我定義了四個btn，每個btn都是根據(jù)getElementById來獲取元素，然后給元素綁定事件，在調(diào)試的時候都挺好，到了后面我打算優(yōu)化流程去掉一個btn的時候我才發(fā)現(xiàn)第四個btn一直沒有定義
<div><button id="btn1">test1</button><button id="btn2">test2</button><button id="btn3">test3</button><button id="btn4">test4</button></div><script>const btn1 = document.getElementById('btn1');const btn2 = document.getElementById('btn2');const btn3 = document.getElementById('btn3');// 綁定事件const bindEvent = () => {console.log(btn5);btn1.addEventListener('click', a, false);btn2.addEventListener('click', b, false);btn3.addEventListener('click', c, false);btn4.addEventListener('click', d, false);};(() => {bindEvent();})();</script>
簡化的代碼如上所示，起先我以為是代碼又緩存，因為我用了express，但是我重啟清除緩存以后，btn4依然可以使用，于是我就寫了個簡單的demo，不用express訪問來測試一下。
此時我猜測可能是瀏覽器的優(yōu)化，因為id是唯一的，所以可能瀏覽器讀取到這個id元素的時候就自動定義了一個id同名變量。所以我猜測類名應該是不可以的，而如果在js中定義了同名的變量或常量，之前瀏覽器默認定義的id同名變量則會被覆蓋。
<body><div id="app"></div><div id="test"></div><div class="aaa"></div>
</body>
<script>const test = 123;console.log(app); // <div id="app"></div>console.log(test); // 123console.log(aaa); // Uncaught ReferenceError: aaa is not defined
</script>
驗證的結(jié)果和我的猜想一樣。我倒是覺得思路挺不錯的，根據(jù)瀏覽器讀取html的順序可以保證js的優(yōu)先級一定是高于這個默認值的，所以也不會影響代碼邏輯，但是如果不清楚的話確實會讓人有點摸不著頭腦。
🚩查了一下后發(fā)現(xiàn)這個特性是很早就有的特性了，大概七八年前就有人發(fā)現(xiàn)這個問題了，算是一個歷史遺留的特性。不過這種方式也是非標準的所以大家還是盡量別用吧。