区分 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中文网其他相关文章！
