再谈BOM和DOM(8)：NodeList与HTMLCollection的区别
Author：zhoulujun Date：
NodeList
NodeList 对象是Node节点的集合——只包含 Node 节点的集合！
NodeList 常用于 DOM（文档对象模型）操作中，例如使用 querySelectorAll() 方法返回的结果。
详见：https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList
HTMLCollection
HTMLCollection 只包含元素节点（Element 节点）
详见：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection
NodeList VS HTMLCollection
需要注意的是，HTMLCollection NodeList 是动态的，也就是说，如果文档结构发生变化，NodeList 会自动更新以反映最新的状态。MutationObserver接口可以观察整个文档、DOM 树的一部分，或某个元素被修改时异步执行回调。
NodeList集合主要是Node节点的集合
HTMLCollection集合主要是Element元素节点的集合。
Node节点共有12种，Element元素节点只是其中一种。
nodeType
nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值
元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5) 实体名称节点 Node.ENTITY_NODE(6) 处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7) 注释节点 Node.COMMENT_NODE(8) 文档节点 Node.DOCUMENT_NODE(9) 文档类型节点 Node.DOCUMENT_TYPE_NODE(10) 文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11) DTD声明节点 Node.NOTATION_NODE(12)
详见：《再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解》,
以下是 JavaScript 中返回 NodeList 和 HTMLCollection 的一些常用操作：
返回 NodeList 的操作：
document.querySelectorAll(selector)：返回文档中匹配指定 CSS 选择器的所有元素的 NodeList。
element.querySelectorAll(selector)：返回指定元素的子元素中匹配指定 CSS 选择器的所有元素的 NodeList。
document.querySelector(selector)：querySelector 方法返回的是一个 Node 对象（通常为 Element），而不是 NodeList 或 HTMLCollection。
Node.childNodes：返回指定节点的所有子节点的 NodeList。
document.getElementsByTagNameNS(namespaceURI, localName)：返回具有指定命名空间和本地名称的所有元素的 NodeList。
Node.getElementsByTagName(name)：返回具有指定标签名的所有后代元素的 NodeList。
Node.getElementsByClassName(className)：返回具有指定类名的所有后代元素的 NodeList。
返回 HTMLCollection 的操作：
document.getElementsByTagName(name)：返回具有指定标签名的所有元素的 HTMLCollection。
document.getElementsByClassName(className)：返回具有指定类名的所有元素的 HTMLCollection。
document.getElementsByName(name)：返回具有指定名称的所有元素的 HTMLCollection。
element.getElementsByTagName(name)：返回指定元素的子元素中具有指定标签名的所有元素的 HTMLCollection。
element.getElementsByClassName(className)：返回指定元素的子元素中具有指定类名的所有元素的 HTMLCollection。
formElement.elements：返回表单元素中的所有表单控件的 HTMLCollection。
selectElement.options：返回 select 元素中的所有 option 元素的 HTMLCollection。
tableElement.rows：返回表格元素中的所有行元素的 HTMLCollection。
tableSectionElement.rows：返回表格节（thead、tbody 或 tfoot）中的所有行元素的 HTMLCollection。
tableRowElement.cells：返回表格行元素中的所有单元格元素的 HTMLCollection。
getElementsByTagName 和 getElementsByClassName 方法在不同上下文中返回 NodeList 和 HTMLCollection，它们的区别主要在于返回的集合类型和使用场景。
getElementsByTagName 和 getElementsByClassName 在 document 上下文中使用时，返回 HTMLCollection：
// 返回 HTMLCollection
const allDivs = document.getElementsByTagName("div");
const allClassElements = document.getElementsByClassName("my-class");getElementsByTagName 和 getElementsByClassName 在元素上下文中使用时，返回 NodeList：
const container = document.getElementById("container");
// 返回 NodeList
const containerDivs = container.getElementsByTagName("div");
const containerClassElements = container.getElementsByClassName("my-class");参考文章：
深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap https://www.cnblogs.com/xiaohuochai/p/5827389.html
深入理解DOM节点类型第一篇——12种DOM节点类型概述 https://www.cnblogs.com/xiaohuochai/p/5785189.html
转载本站文章《再谈BOM和DOM(8)：NodeList与HTMLCollection的区别》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/xml/2021_0511_9099.html