[JavaScript] getElements ByClassName 取得對應的 Class 物件進行操作

最近使用 純 JavaScript 選取 class 時，碰到了一些問題，我發現我沒有辦法像使用 document.getElementById 一樣，直接調用一些事件的方法，如：onclick

document.getElementsByClassName('classname').onclick = function(){
 alert('click');
}

這邊有個簡單也很基本的觀念：

在 HTML 中，一個物件的 ID 在整個 document 中 是獨一無二的 ：

而 class 這不同，在一個 document 中，很常被拿來重複使用，在一個 document 中，是可以 多數 存在的

而當我們使用 document.getElementsByClassName 來選取 class 的元素時，相同道理，會回傳 多數 含有指定 class 的物件

回傳值為一個 陣列（Array） 的形式

而如果我們要對 所有的 陣列裡的物件進行操作，只要使用 for 迴圈 的方式就可以了，如下：

var element= document.getElementsByClassName('classname');
 for(var i=0;i<element.length;i++){
      element[i].onclick = function(){
       alert('click');
      }
 }

參考文章：

MDN : Document.getElementsByClassName()