HTMLCollections、NodeLists 和物件陣列在 DOM 操作中有何不同？

區分DOM 中的HTMLCollection、NodeList 和物件陣列

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

HTMLCollections 與NodeLists

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

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

實時集合與快照集合

DOM 集合可以是實時或快照：

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

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

陣列與物件陣列

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

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

選擇節點

使用文件方法：

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

使用 jQuery：

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

範例腳本

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

• console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: 比較陣列。
• console. log('{123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}：比較物件陣列使用物件語法。 =',document.links): 記錄連結的HTMLCollection。而不是集合。
console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"))：記錄所有td 元素的HTMLCollection。
• console.log( '$(" #myTable")=',$("#myTable")): 記錄代表#myTable 元素的jQuery 物件。
• console.log('$("td")=', $("td" ))：記錄包含所有td 元素的jQuery 物件陣列。

以上是HTMLCollections、NodeLists 和物件陣列在 DOM 操作中有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！