区分 DOM 中的 HTMLCollections、NodeList 和 Object Arrays

开发者在访问 DOM 节点时，经常会遇到 HTMLCollections、NodeLists 和对象数组。了解这些数据结构之间的差异对于有效操作文档结构至关重要。

HTMLCollections 与 NodeLists

HTMLCollections 和 NodeLists 与节点集合有相似之处，但它们有显着特征：

• 内容： HTMLCollections 只包含 Element 节点，而 NodeLists 可以容纳任何类型的节点。
• 方法： In除了所有集合通用的方法之外，HTMLCollections 还提供namedItem 方法用于按名称访问元素。

实时集合与快照集合

DOM 集合可以是实时或快照：

• 实时： 当对 DOM 进行更改时，集合会自动更新。
• 快照： 集合保持固定，无论 DOM 修改如何。

浏览器方法（例如 getElementsByTagName）返回的 DOM 集合通常是实时的，而 jQuery 选择是快照。

数组与对象数组

虽然 jQuery 对象在控制台日志中显示为数组，但它们实际上是对象数组：

• 数组： 使用数字索引访问的顺序集合。
• 对象数组： 使用数字和命名属性访问元素的数组。

选择节点

使用文档方法：

• document.getElementsByTagName("td")：返回所有 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"}：将对象数组与对象语法进行比较。
• console.log('Node=',Node)：记录全局Node对象，它是一个代表节点类型的对象数组。
• console.log('document.links=', document.links): 记录链接的 HTMLCollection。
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): 记录单个元素，而不是collection.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): 记录具有“myRow”类的元素的 NodeList。
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): 记录所有 td 元素的 HTMLCollection。
• console.log('$(" #myTable")=',$("#myTable")): 记录表示 #myTable 元素的 jQuery 对象。
• console.log('$("td")=',$("td "))：记录包含所有 td 元素的 jQuery 对象数组。