Day 15 JavaScript NodeList vs HTMLCollection

• NodeList 与 HTMLCollection 的主要差异点是节点的类型不一样：
  • NodeList:包含多种节点，如：元素节点、文字节点、属性节点、注解节点等节点。
  • HTMLCollection:只包含元素节点。
• 相同点：
  • 都有 .length 属性可计算长度。
  • 都是类阵列。

NodeList:

是节点(node)的集合，长的很像阵列，但实质上不是阵列。
NodeList可以使用的方法可参考mdn NodeList。

节点:

就是 DOM [注1] 里面的各个物件，主要有以下几种类型：

• 元素节点:HTML 的标签。
• 文字节点:标签内的文字内容。
• 属性节点:标签内的属性。
• 注解节点:我们平常用 Ctrl + / 做的注解。

其他节点可参考:mdn Node.nodeType

注1：DOM 是用来把 HTML 文件的标签变成物件，且存取後拿来使用。

回传值:

透过 Node.childNodes 跟 document.querySelectorAll()会根据被选取到的对象有哪些节点，回传对象的 NodeList，也就是回传对象的节点。

• Node.childNodes:回传目标对象的动态(live)[注1]子层节点，包括元素节点、文字节点及注解节点。
• document.querySelectorAll():依据选取器选到的节点回传静态(static)[注2]节点，除了元素节点、文字节点、注解节点也包括属性节点及其他节点。

注1：动态代表除了原本 HTML 内有的节点外，如果有使用到 JS 去新增或删除节点，也会同步抓取。
注2：静态代表只会抓到原本 HTML 内有的节点。

HTMLCollection:

是元素(elements)的集合，类似 arguments 物件的样子。
HTMLCollection可以使用的方法可参考mdn HTMLCollection。

透过 getElementsByClassName() 跟 getElementsByTagName()会根据被选取到的对象有哪些元素节点，回传对象的 HTMLCollection。

参考：
[1]重新认识 JavaScript: Day 12 透过 DOM API 查找节点
[2]mdn NodeList
[3]mdn Node.nodeType
[4]mdn HTMLCollection