Static Collection 和 Live Collection 的差異

在操作 DOM 時，我們經常會使用 JavaScript 取得一組 HTML 元素進行操作，例如：

document.getElementsByClassName("item");
document.querySelectorAll(".item");

這些方法表面上功能類似，實際上它們回傳的是不同型態的集合（collection），而這些集合的是否會自動反映 DOM 變化，決定了我們應該如何使用它們。

什麼是 Live Collection？

#

Live Collection 指的是，當 DOM 結構改變時（例如新增或刪除元素），集合內容會自動更新。

常見的 Live Collection 方法：

#

• getElementsByClassName()
• getElementsByTagName()
• element.children

回傳類型：

#

• HTMLCollection（不支援 forEach()，需要轉為陣列）

特性：

#

• 與 DOM 維持同步（Live）
• 節省重新查詢的成本

什麼是 Static Collection？

#

Static Collection 指的是，取得集合時是 DOM 當下的快照，之後 DOM 再變動也不會影響集合內容。

常見的 Static Collection 方法：

#

• querySelectorAll()
• element.childNodes

回傳類型：

#

• NodeList（支援 forEach()）

特性：

#

• 一次性查詢結果（不會自動更新）
• 較穩定、預測性高，適合搭配迴圈與邏輯處理

差異示意範例

#

const liveList = document.getElementsByTagName("li");     // Live
const staticList = document.querySelectorAll("li");       // Static

console.log(liveList.length);   // 2
console.log(staticList.length); // 2

// 新增一個 <li>
const newLi = document.createElement("li");
document.querySelector("ul").appendChild(newLi);

console.log(liveList.length);   // ✅ 自動變為 3
console.log(staticList.length); // ❌ 仍然是 2

何時該用 Live Collection？

#

何時該用 Static Collection？

#