如何取得HTML中相同Class的元素群組

getElementsByClassName

一般來說getElementsByClassName()是最常用的方法,但是如果我們要迭代處理獲得的所有元素,就會發生問題,因為這個函式是會即時反應你做出的更動的。 假設你使用了AClass選取了10個元素,然後你想要取消這10個元素的AClass,大部分的人會選擇使用For迴圈來處理,這個時候就會出問題了。 因為getElementsByClassName()所獲得的元素陣列是即時更新的,也就是說你只要一刪除你用來作為條件的Class Name,陣列的元素馬上就會更新。 這樣就會發生跳過要處裡的元素或者指定的元素位置超過陣列長度的狀況。

在MDN的技術文件open in new window()中也提到了這一點。

querySelectorAll

要避免getElementsByClassName()所產生的問題,可以使用querySelectorAll()來替代,querySelectorAll()會回傳靜態的元素陣列,讓你可以簡單的修正。

Last Updated:
Contributors: eisen