document.getElementById 和 document.getElementsByClassName獲取DOM元素的區別
阿新 • • 發佈：2018-12-23
想必小夥伴們對於 JS 獲取DOM的幾種方法早已爛熟於心，瞭然於胸，
尤其是 document.getElementById 和 document.getElementsByClassName，
看看下面截圖，用上面2種方法獲取到元素並新增點選事件後，控制檯會打印出什麼呢？
可能有小夥伴晃眼一看，這麼簡單，不就是 1和2 嗎，真的是這樣嗎？下面看看控制檯的列印截圖
結果是隻打出了1，為什麼沒有打印出2呢？
現在我們把2種獲取DOM的方法打印出來，如下截圖，
console.log(test_id); console.log(test_class);
結論：
①：前者獲取的是指定的具有唯一性的一個元素，後者獲取的是一個集合，
②：document.getElementsByClassName不能直接給一個集合新增事件，
要用陣列索引的方式，test_class[0].onclick = function(){}
③：document.getElementsByClassName獲取第一個元素就是test_class[0]，第二元素test_class[1]，以此類推
測試demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title></title> </head> <body> <button id="Test">我是id</button> <button class="test">我是class</button> <button class="test">我也是class</button> <script> var test_id = document.getElementById("Test"); var test_class = document.getElementsByClassName("test"); test_id.onclick = function() { console.log(1); } test_class[0].onclick = function() { console.log(2); } test_class[1].onclick = function() { console.log(3); } console.log(test_id); console.log(test_class); </script> </body> </html>
寫這篇部落格的初衷說來慚愧，因為習慣了用id獲取元素，所以當用class獲取元素時，總會忘記獲取的是一個集合，
這也說明我基礎還是不牢固，以此警示自己，希望自己不要好高騖遠，打好基礎