DOM映射

[MandyJin]

var oUl = document.getElementById('ul1');
        var oLis = oUl.getElementsByTagName('li');
        console.log(oLis.length);//->5

        var oLi = document.createElement('li');
        oUl.appendChild(oLi);
        console.log(oLis.length);//6没有重新的获取，但是oLis这个集合中的长度和内容会自动跟着发生改变

页面中的标签和JS中获取到的元素对象(元素集合)是紧紧的绑定在一起的，页面中的HTML结构改变了，JS中不需要重新获取，集合里面的内容也会跟着自动改变。

但是我们我们要注意这样的情况 可以说是因为DOM映射吧
我的理解是，因为在追加新的li前，获取的方法已经执行了，我们在打印时，li已经被浏览器渲染在页面上，所以会出现如图所示的情况

[MandyJin]

DOM的映射机制

• 页面中的HTML元素，和JS中通过相关方法获取到的元素集合或者元素对象存在映射关系(一个改另外一个会跟着自动修改)

• xxx.style.color='red' : 把xxx元素对象对应堆内存中的style属性下的color属性值修改为'red'（本质操作的是JS堆内存） ；但是由于DOM映射关系，页面中的标签和XXX元素对象是绑在一起的，我们修改元素对象空间的值，页面中的元素会按照最新的值进行渲染；

• 在元素绑定前，我们获取容器中元素，得到一个空的元素集合，元素数据绑定后，我们不需要重新获取，DOM的映射机制会帮我们把新增加的元素映射到之前获取的空集合中，让其变为有元素的集合（querySelectorAll获取的集合是静态集合(staticNodeList)，不存在上述所谓的映射机制，所以基于这种办法，数据绑定完成后需要重新的获取一次才可以）

• appendChild在追加元素对象的时候，如果这个元素之前容器中已经存在，此时不是克隆一份新的追加到末尾，而是把原有的元素移动到末尾位置