十個隱藏且實用的前端知識點,你絕對想不到!
編輯整個網(wǎng)頁
我們都知道網(wǎng)頁的內(nèi)容是生成的,我們只能讀,并不能直接修改,如果想修改就得打開控制臺進行修改。
但是我最近發(fā)現(xiàn)一個方法,那就是設置 document.body.contentEditable='true' 就可以直接在頁面上編輯整個網(wǎng)頁啦!?。?/p>
獲取設備網(wǎng)速
navigator.connection.downlink 屬于 NetworkInformation 接口,這個 API 能獲取當前設備的網(wǎng)速,也就是 下行寬帶,它返回一個數(shù)字,單位是 Mb/s。
我們來看看 MDN 上對于 navigator.connection.downlink 的介紹:
但是這個 API 的兼容性比較一般,大家在使用的時候記得要兜底哦~
控制手機振動
navigator.vibrate 這個 API 能控制手機進行振動,你可以傳入兩種參數(shù)(單位都是 ms):
- 數(shù)字:控制振動的持續(xù)時間
- 數(shù)組:控制振動間歇的持續(xù)時間
這個 API 的兼容性也是比較一般,所以大家也要做好設備判斷和兜底哦~
禁止網(wǎng)頁自動拼寫校驗
在網(wǎng)頁的輸入框中我們可以看到,當我們輸入的字母串不符合單詞檢測的時候,會有紅線警告:
那怎么去掉呢?我們可以給 body 標簽的 spellcheck 設置為 false 即可:
禁止粘貼文本到你的網(wǎng)頁
有時候你不想要用戶從別的地方粘貼一些文本到你的網(wǎng)頁中去,那么可以通過監(jiān)聽 paste 這個事件,并且阻止它的默認行為,從而達到阻止粘貼的效果。
隱藏 DOM 元素
說到隱藏 DOM 元素,我們會想到幾種方式:
- display: none
- visibility: hidden
- opacity: 0
- DOM 銷毀
但是其實 HTML 標簽其實本身就自帶了一個屬性 hidden 去控制 DOM 元素是否隱藏(無法隱藏偽元素):
唯一 ID 變成全局變量
有時候在寫一個 DOM 節(jié)點的時候,會給它賦上一個 ID:
其實我們想要獲取這個 DOM 并不需要使用 API 去獲取,直接輸出 content 這個全局變量即可:
百變 console
可能大家在使用 console 的時候只用過 console.log,但其實很多人不知道,console 可不止 log 這個方法,它非常的強大?。?!
(1) console.table
console.table 可以將一個數(shù)組輸出成一個表格:
(2) console.group & console.groupEnd
console.group 顧名思義就是分組的意思,它可以將一些 console.log 給分組起來,便于查看日志:
(3) console.time & console.timeEnd
console.time 用來計算代碼運行的時間:
(4) console.warn & console.error
顧名思義,console.warn 就是輸出警告信息,console.error 就是輸出報錯信息: