1.頁面擁有ID的元素會創建全局變量
在一張HTML頁面中，所有設置了ID屬性的元素會在JavaScript的執行環境中創建對應的全局變量，這意味着document.getElementById像人的闌尾一樣顯得多餘了。但實際項目中最好老老實實該怎麼寫就怎麼寫，畢竟常規代碼出亂子的機會要小得多。
<div id="myElement"></div>
<script type="text/javascript"> console.log(myElement); </script>
2.正確的隱私元素方式
你是否曾經爲了隱藏某個元素而使用過 myElement.style.display = 'none' 這種方法呢？如果是的話，請別再這麼做了！ 只需調用 myElement.hidden = true ，即可實現元素隱藏的功能。
3.給元素添加class正確方式
toggle 也不算是元素的方法，它實際上是元素屬性上的一個方法。嚴格來說，這是一種爲元素添加或刪除某個 class 的方法，具體做法是 myElement.classList.toggle('some-class') 。 如果你曾經通過 if 條件語句爲元素添加 class，那就應該趕緊改用這種做法。 正確的方式是爲 toggle 方法傳入第二個參數，如果該參數返回 true ，則指定的 class 就會添加至元素上。 el.classList.toggle('some-orange-class', theme === 'orange')。
4.檢查某元素class值
假設我需要檢查某個元素是否包括一個特定的 class。 這是最複雜的方式：
if (myElement.className.indexOf('some-class') > -1) { // do something }
或者可以用：
if ( myElement.classList.contains ('some-class')) { // do something }
最佳方式： if (myElement.matches('.some-class')) { // do something }
5.檢查某元素的子元素
你有沒有遇到過這樣的情形，需要知道某個元素是否被包含在另一個元素中？至少我本人經常會遇到這樣的問題。 打個比方，假設我在處理一個鼠標點擊事件時，需要知道它是發生在一個模態窗口中還是發生在外面（這樣我才能夠關閉這個窗口），我大概會這麼做：
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
代碼中的 modalEl 是模態窗口的引用，而 e.target 則代表各種發生點擊事件的元素。
6.array.filter(Boolean)
ECMAScirpt5 中 Array 類中的 filter 方法使用目的是移除所有的 “false”類型元素 (false, null, undefined, 0, NaN or an empty string)：
var a=[1,2,"b",0,{},"",NaN,3,undefined,null,5];
var b=a.filter(Boolean); // [1,2,"b",{},3,5]
Boolean 是一個函數，它會對遍歷數組中的元素，並根據元素的真假類型，對應返回 true 或 false.
例如： Boolean(0); // false Boolean(true); // true Boolean(1); // true Boolean(""); // false Boolean("false"); // true. "false"是一個非空字符串 實際上，下面這樣的寫法是一種簡寫模式 b = a.filter(Boolean);
它等價於 b = a.filter(function (x) { return Boolean(x); });
7.Array.from
你知道Array.from可以接受第二個參數嗎？其作用類似於數組的map方法，用來對每個元素進行處理，將處理後的值放入返回的數組。
Array.from(arrayLike, x => x * x);
等同於
Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
8.利用a標籤自動解析URL
很多時候我們有從一個URL中提取域名，查詢關鍵字，變量參數值等的需要，而萬萬沒想到可以讓瀏覽器方便地幫我們完成這一任務而不用我們寫正則去抓取。方法就在JS代碼裏先創建一個a標籤然後將需要解析的URL賦值給a的href屬性，然後就得到了一切我們想要的了。
var a = document.createElement(‘a');
a.href = 'http://www.haorooms.com/post/mailto_link_html?name=1';
console.log(a.host)
9.使用事件委託
一個簡單的需求，比如想給ul下面的li加上點擊事件，點擊哪個li，就顯示那個li的innerHTML。這個貌似很簡單！代碼如下！
<ul id="ul-test"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
var oLi=oUl.getElementsByTagName("li");
for(vari=0,len=oLi.length;i<len;i++) {
oLi[i].addEventListener("click",function(){ alert(this.innerHTML) }) } </script>
for循環，循環的是li，10個li就循環10次，綁定10次事件，100個就循環了100次，綁定100次事件！
如果li不是本來就在頁面上的，是未來元素，是頁面加載了，再通過js動態加載進來了，上面的寫法是無效的，點擊li是沒有反應的！ 所以就者需要用事件委託（即使不考慮上面的第二種情況，也是建議使用事件委託）！代碼如下
<ul id="ul-test"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <script type="text/javascript">
var oUl=document.getElementById("ul-test");
oUl.addEventListener("click",function(ev){
var ev=ev||window.event; var target=ev.target||ev.srcElement; //如果點擊的最底層是li元素
if(target.tagName.toLowerCase()==='li'){ alert(target.innerHTML) } }) </script>
這樣寫，即使是動態添加進來的li點擊也有反應，還有一個就是ul只有一個，事件綁定在ul上，無論li多少個，都是添加一次事件！但是也是可能會有問題，如果li下面還有子元素，那麼點擊的時候，target可能不是li，而是鼠標點擊那個位置的最底層元素！
10.減少dom操作
這裏我用jquery來講解，比較容易理解，原生js也是這個道理！如下代碼
$('.div1').click(function(){ ... })
//--------------------------分割線
var $div1=$('.div1'); $div1.click(function(){ ... })
上面的代碼，改變的也是緩存了$('.div1')，但是這裏就建議是第二種寫法了， 因爲第一種點擊一次就要查詢一次.div1，Dom的操作還是能減少就減少！
11.字符串補全
日期，我們多采用4-2-2的表示形式 例如：2018-07-23 當我們使用時間戳進行月份獲取的時候，是沒有前面的0的，
var month = new Date().getMonth() + 1; // 結果是7 此時，就需要進行補全，
通常做法是這樣： if (month < 10) { month = '0' + month; }
padStart()方法，我們代碼可以簡化成下面這一行
var month = String(new Date().getMonth() + 1).padStart(2, '0');
str.padStart(targetLength [, padString])
當targetLength小於str字符串長度時 則原本的字符串原封不動返回
'zhangxinxu'.padStart(5); // 結果還是'zhangxinxu'