DOM 集合型別 HTMLCollection、NodeList 差異說明

其實寫這一篇主要是為了下一篇文章鋪梗

在DOM中取得的HTML element 集合有兩種型別 - HTMLCollection、NodeList
雖然不能使用陣列型別的method，但這兩種型別都可以用陣列索引的方式存取內容
那為什麼會有這兩種型別的實作呢?

這兩種型別是類似的規格實作，專門用來放置HTML element 節點
最明顯的差異點是 NodeList 並不限制儲存的節點型別，而HTMLCollection只能放置 element 節點
舉DOM操作最常看到的 element.childNodes / element.children 來說
childNodes會回傳element底下所有內容的集合，包含文字節點、屬性節點，即是NodeList 型別物件
children 只包含了 element 節點，就是HTMLCollection物件

另一個差異點則是 HTMLCollection 多了一個 namedItem 這個 method
這個method的好用在於你可以藉由 id 或 name 屬性取得該 HTMLCollection 裡符合的element(s)
如果是唯一符合的element則直接回傳，如果有複數個elements則回傳HTMLCollection
在部分場合，能透過這個方式進行較優雅的操作

我在這邊要說一點，DOM是我看過最爛的API(沒有之一)
語意混淆不清，另一點就是spec裡有不少地方是留給瀏覽器自行解釋，所以會碰上跨瀏覽器議題
除了前面提到的childNodes / children 這種從字面上看不出區別的 element 集合外
開發者多半遇過 lastChild、firstChild 在不同瀏覽器中會取得不同element
比如在chrome中便可能會取得撰寫時排版的換行符號，但在某些瀏覽器取得的是element node
這裡便是瀏覽器對於 element 集合的處理是用 HTMLCollection 或 NodeList 的區別了
DOM的getElementsByTagName等取得 element 集合的method也會碰上這個問題
firefox和chrome回傳的集合物件型別便可能不同
最好的應對方式就是在spec沒有明確定義瀏覽器該如何處理時，就不要過於仰賴集合的特性