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.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")): 记录单个链接元素，而不是集合。
• 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 对象数组。

以上是HTMLCollections、NodeLists 和对象数组在 DOM 操作中有何不同？的详细内容。更多信息请关注PHP中文网其他相关文章！