現象對比
// 失效
document.getElementsByClassName("class").setAttribute("src", "path");
// 生效
document.getElementById("id").setAttribute("src", "path");
核心區別
| 特性 | getElementById | getElementsByClassName |
|---|
| 返回值 | 單個 Element 對象 或 null | HTMLCollection (類數組，即時更新) |
| 數量 | 唯一 (ID 應唯一) | 0~N 個 |
| 調用 setAttribute | 直接調用 | 需遍歷集合逐個調用 |
| 瀏覽器兼容 | IE5.5+ | IE9+ |
正確用法
單個元素 (ID)
var img = document.getElementById("myImg");
if (img) img.setAttribute("src", "new.jpg");
多個元素 (Class)
// 現代寫法 (推薦)
var imgs = document.getElementsByClassName("myImgClass");
Array.from(imgs).forEach(function(img) {
img.setAttribute("src", "new.jpg");
});
// 或 querySelectorAll (靜態 NodeList)
document.querySelectorAll(".myImgClass").forEach(function(img) {
img.src = "new.jpg"; // 直接屬性賦值更簡潔
});
// 兼容 IE8 寫法
var imgs = document.getElementsByClassName("myImgClass");
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute("src", "new.jpg");
}
進階補充
- HTMLCollection vs NodeList：前者即時反映 DOM 變化，後者靜態快照。動態增刪 class 節點時需注意。
- 性能：`getElementById` 最快 (哈希表查找)；`getElementsByClassName` 次之；`querySelectorAll` 最慢 (CSS 選擇器解析)。
- 最佳實踐：優先使用 `id` 定位唯一元素；批量操作用 `querySelectorAll` + `forEach`，代碼可讀性最強。
