最近使用 純 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()

Summary
[JavaScript] getElementsByClassName 取得對應的 Class 物件進行操作
Article Name
[JavaScript] getElementsByClassName 取得對應的 Class 物件進行操作
Description
最近使用 純 JavaScript 選取 `class` 時,碰到了一些問題,我發現我沒有辦法像使用 `document.getElementById` 一樣,直接調用一些事件的方法,如:`onclick`
Author

Facebook 功能: