Typescript中使用DOM的动态集合
DOM是JavaScript重要组成部分，在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection(html元素的集合)。
一、相关概念：
1.NodeList集合
NodeList 集合作为一种对象，代表一个有顺序的节点列表。我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。length可获得其长度，item(index)方法可获得其中某个节点。
var firstChild = someNode.childNodes[0]; // 获取第一个元素
var secondChild = someNode.childNodes.item(1); // 获取第二个元素
var count = someNode.childNodes.length; // 获取集合长度
一般地，节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也不相同。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)
3.HTMLCollection
HTMLCollection对象与NodeList对象类似，也是节点的集合，返回一个类数组对象。但二者有不同之处。NodeList集合主要是Node节点的集合，而HTMLCollection集合主要是Element元素节点的集合。Node节点共有12种，Element元素节点只是其中一种。
4.NamedNodeMap
NamedNodeMap对象的常见实例对象是attributes属性。
var attrs = test.attributes;
console.log(attrs instanceof NamedNodeMap); // true
二、动态集合
以上提到的三种，NodeList、HTMLCollection、NamedNodeMap都算是节点的动态集合。
dom将页面解析成一个由多层次节点构成的结构，即dom结构，节点是dom结构的基础。dom中动态集合是指能够自动映射dom节点变化的集合。dom中有上面提到的三种常用的动态集合。Javascript中的动态集合都是类数组。
与动态集合相对的是静态集合，dom中静态集合不能够自动映射dom节点变化，仅仅只是一组节点快照。
动态集合是个很实用的概念，但在使用循环时一定要千万小心。可能会因为忽略集合的动态性，造成死循环
var divs = document.getElementsByTagName("div");
for(var i = 0 ; i < divs.length; i++){
document.body.appendChild(document.createElement("div"));
}
在上面代码中，由于divs是一个HTMLElement集合，divs.length会随着appendChild()方法，而一直增加，于是变成一个死循环
为了避免此情况，一般地，可以写为下面形式
var divs = document.getElementsByTagName("div");
for(var i = 0,len = divs.length; i < len; i++){ //divs为动态集合，避免循环中divs的动态属性导致死循环
document.body.appendChild(document.createElement("div"));
}
一般地，要尽量减少访问NodeList、HTMLCollection、NamedNodeMap的次数。因为每次访问它们，都会运行一次基于文档的查询。所以，可以考虑将它们的值缓存起来。
三、总结
NodeList是节点的集合，HTMLCollection是元素节点的集合，NamedNodeMap是特性节点的集合，它们都是类数组对象；还有一个更经典的类数组对象——函数内部的arguments，它也具有动态性。
对于动态集合的应用，动态集合不实际存储元素和属性值，每次访问集合都重新查找DOM树。应注意其动态属性容易导致的循环混乱问题，事先以变量赋值形式缓存其值，减少直接访问动态集合的次数，以提高程序的性能。
参考文档：
https://blog.csdn.net/weixin_42472040/article/details/89340144
