區分DOM 中的HTMLCollections、NodeList 和Object Arrays

開發者在存取DOM 節點時，經常會遇到HTMLCollections、NodeLists 和&&&]開發者在存取DOM 節點時，經常會遇到HTMLCollections、NodeLists 和&&&]物件數組。了解這些資料結構之間的差異對於有效操作文件結構至關重要。

HTMLCollections 與NodeLists

HTMLCollections 和NodeLists 與節點集合有相似之處，但它們有明顯特徵：

• 內容： HTMLCollections 僅包含Element 節點，而NodeLists 可以保存任何類型的節點。
• 方法： 除了所有集合通用的方法之外，HTMLCollections 還提供 nameItem 方法用於按名稱存取元素。

即時集合與快照集合

DOM 集合可以是即時集合，也可以是快照集合快照：

• 即時： 當對DOM 進行更改時，集合會自動更新。
• 快照： 集合保持固定，無論DOM 修改。

瀏覽器方法（例如 getElementsByTagName）傳回的 DOM 集合通常是即時的，而jQuery 選擇是快照。

陣列與物件陣列

雖然jQuery 物件在控制台日誌中顯示為陣列，但它們實際上是物件陣列：

• 陣列： 使用數字存取的順序集合索引。
• 物件陣列： 使用數字屬性和命名屬性存取元素的陣列。

選擇節點

使用文件方法：

• document.getElementsByTagName("td") ：傳回所有td 元素的HTMLCollection。
• document.getElementsByClassName("myRow")：傳回 NodeList所有具有「myRow」類別的元素。

使用jQuery:

• $("td"): 選擇所有 td 元素並傳回 jQuery 對象，一個物件陣列。

範例腳本

提供的腳本示範了資料之間的差異結構：

• console.log('[ 123,"abc",321,"cba"]=[123,"abc",321,"cba"]:比較arrays.
• console.log('{123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321 , cba:"cba"}：將物件陣列與物件進行比較語法。 &&&]
console.log('document.links= ',document.links): 記錄HTMLCollection links.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): 記錄單一元素，而不是集合。 .log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))：記錄元素的NodeList "myRow" class.
• console.log('document.getElementsByTagName(" td")=',document.getElementsByTagName("td")): 記錄所有td 元素的HTMLCollection。 log('$("td")=',$("td")): 記錄包含所有td 元素的jQuery物件數組。