页面中的HTML元素和我们通过JS相关方法（getElementsById、getElementsByTagName/getElementsByXXX）获取的元素对象或元素集合存在映射关系（一个改另一个跟着改）
常见DOM映射
- liList[i].style.backgroundColor = 'red'; 将 liList[i] 元素对象对应的堆内存下的 style 属性下的 backgroundColor 属性修改为 red（本质是操作 js 堆内存空间），但是由于 DOM 映射机制，页面中的元素和元素对象的堆内存空间是绑定在一起的。所以我们修改了元素对象堆内存空间里的值，页面中的标签会按照最新的值来渲染；
- liList 是 ul 下面的 li 元素集合，集合中存储的都是元素对象，而对象都是堆内存；所以 liList 这个类数组中存储的形如，{0: aaafff111, 1: aaafff222, .....,length: 1};然后我们通过类数组转数组的方法将类数组转为数组后数组，数组中存储的也只是元素对象的堆内存地址，形如 [aaafff111, aaafff222, ....,length: 10]，此时虽然是把类数组转成了数组，但是并不是重新创造了10个 li 元素对象，而是把原来的10个 li 搞到一个数组中了。然后我们通过 appendChild 把数组中的元素对象插入到页面中时，其实这些元素对象就是页面中的元素对象，此时 appendChild 会把这个元素对象移动到容器末尾。
- appendChild：向容器末尾追加元素，如果追加的元素已经存在于容器中，此时不会克隆（按照原来的再造一份一模一样的新的）一份再追加，而是把原来的移动到容器末尾； 数据绑定后：数据绑定之前，我们获取的 ul 下面的 li 得到一个空集合，但是当我们绑定数据后不需要重新获取，DOM 映射机制会把新增加的元素映射到我们之前已经获取的集合中，此时元素集合不再是空集合。但是 querySelector 和 querySelectorAll 获取的集合叫做静态集合 staticNodeList，是掐断了 DOM 映射的，基于这种方式获取元素集合，在数据绑定完成后需要重新获取。
